Pages Router: ダイナミックルートの詳細

ダイナミックルートについて知っておくべき重要な情報を以下に示します。

外部APIの取得またはデータベースのクエリ

getStaticPropsと同様に、getStaticPathsもあらゆるデータソースからデータを取得できます。この例では、getAllPostIds（getStaticPathsで使用される）が外部APIエンドポイントからデータを取得する場合があります:

export async function getAllPostIds() {
  // ファイルシステムの代わりに、
  // 外部APIエンドポイントから投稿データを取得
  const res = await fetch('..');
  const posts = await res.json();
  return posts.map((post) => {
    return {
      params: {
        id: post.id,
      },
    };
  });
}

開発環境と本番環境

開発環境（npm run dev または yarn dev）では、getStaticPathsは_すべてのリクエスト_で実行されます。
本番環境では、getStaticPathsは_ビルド時_に実行されます。

フォールバック

getStaticPathsからfallback: falseを返したことを思い出してください。これは何を意味するのでしょうか？

fallbackがfalseの場合、getStaticPathsで返されなかったパスは404ページになります。

fallbackがtrueの場合、getStaticPropsの動作が変わります:

getStaticPathsから返されたパスはビルド時にHTMLとしてレンダリングされます。
ビルド時に生成されなかったパスは404ページになりません。代わりに、Next.jsはそのようなパスへの最初のリクエストでページの「フォールバック」バージョンを提供します。
バックグラウンドで、Next.jsはリクエストされたパスを静的に生成します。同じパスへの後続のリクエストでは、ビルド時に事前レンダリングされた他のページと同様に、生成されたページが提供されます。

fallbackがblockingの場合、新しいパスはgetStaticPropsでサーバーサイドレンダリングされ、将来のリクエストのためにキャッシュされるため、パスごとに1回だけ発生します。

これはレッスンの範囲を超えますが、fallback: trueとfallback: 'blocking'について詳しくは、fallbackドキュメントをご覧ください。

キャッチオールルート

ダイナミックルートは、括弧内に3つのドット（...）を追加することで、すべてのパスをキャッチするように拡張できます。例えば:

pages/posts/[...id].jsは/posts/aだけでなく、/posts/a/b、/posts/a/b/cなどにもマッチします。

これを行う場合、getStaticPathsでは、次のようにidキーの値として配列を返す必要があります:

return [
  {
    params: {
      // 静的に /posts/a/b/c を生成
      id: ['a', 'b', 'c'],
    },
  },
  //...
];

そして、getStaticPropsではparams.idが配列になります:

export async function getStaticProps({ params }) {
  // params.idは['a', 'b', 'c']のようになります
}

詳しくは、キャッチオールルートのドキュメントをご覧ください。

ルーター

Next.jsルーターにアクセスしたい場合は、next/routerからuseRouterフックをインポートすることで可能です。

404ページ

カスタム404ページを作成するには、pages/404.jsを作成します。このファイルはビルド時に静的に生成されます。

// pages/404.js
export default function Custom404() {
  return <h1>404 - ページが見つかりません</h1>;
}

詳しくは、エラーページのドキュメントをご覧ください。

その他の例

getStaticPropsとgetStaticPathsを説明するためにいくつかの例を作成しました。詳細についてはソースコードをご覧ください:

以上です！

次のレッスンでは、Next.jsのAPI Routesについて説明します。

ダイナミックルートの詳細

On this page