Gatsby.jsで動的にページを生成する

React製フレームワークのGatsby.jsで動的にページを生成する方法は、gatsby-node.jsファイルを使う方法と、src/pagesディレクトリ内のファイル名で設定する方法の2種類あります。バージョン2以降の主流は後者の方法で、ほとんどの場合でgatsby-node.jsファイルを扱う必要はありません。

ファイルの命名規則

他の主要なフレームワークと比較すると、Gatsby.jsの「ファイル名によるページ生成のルール」は若干ややこしく、GraphQLのタイプ名とフィールド名がベースになっています。

例えば、CMSがWordPressの場合、サイト側でWPGatsbyとWPGraphQLをインストールすることになり、Gatsby.js専用のタイプが追加されます。

以下は主要なタイプ名です。

ページの種類	タイプ名
記事ページ	wpPost
固定ページ	wpPage
カテゴリー	wpCategory
タグ	wpTag

これらのタイプは「id」や「slug」などのフィールドを持っていて、{タイプ名.フィールド名}.拡張子または{タイプ名.フィールド名__下層フィールド名}.拡張子の形でファイルを作ることで、そのフィールドの値を取得できます。拡張子は、jsxまたはtsxです。

ファイル名	取得できる値
{wpPost.slug}.jsx	記事ページのスラッグ
{wpPost.databaseId}.jsx	記事ページのID

取得した値はクエリの引数になるため、それを使って特定のページのデータを取得します。

記事ページを生成する場合

例として、通常の記事ページを生成するとします。パーマリンク（URL）はhttps://yoursite.com/slug/の形にするとします。つまり、スラッグがtestなら、https://yoursite.com/test/になります。

この場合、ファイル名は{wpPost.slug}.tsxまたは{wpPost.slug}.tsxとなります。

クエリの引数には各ページのスラッグが入るため、それを元にクエリを実行します。

以下はサンプルコードです。

export const query = graphql`
  query Post($slug: String) {
    wpPost(slug: { eq: $slug }) { # $slugにページのスラッグが入る
      title
      content
      author {
        node {
          name
        }
      }
    }
  }
`;

その後は通常の流れと同じで、ページコンポーネント側の引数であるdataに実行結果が入ります。

以下はページタイトルを表示する例です。

const Post = ({ data }: PageProps) => {
  const { title } = data.wpPost;

  return <>Title: {title}</>;
};

export default Post;