チャプター36

動的ルーティングの詳細

動的ルーティングについて知っておくべき重要な情報です。

外部APIのフェッチまたはデータベースのクエリ

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

export async function getAllPostIds() {
  // Instead of the file system,
  // fetch post data from an external API endpoint
  const res = await fetch('..');
  const posts = await res.json();
  return posts.map((post) => {
    return {
      params: {
        id: post.id,
      },
    };
  });
}

開発環境 vs. 本番環境

開発環境（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でサーバーサイドレンダリングされ、将来のリクエストのためにキャッシュされるため、各パスにつき一度しか発生しません。

これは本レッスンの範囲外ですが、fallback: true および fallback: 'blocking' については、fallbackドキュメントで詳しく学ぶことができます。

キャッチオールルート

動的ルーティングは、括弧内に3つのドット（...）を追加することで、すべてのパスを捕捉するように拡張できます。例えば

pages/posts/[...id].js は /posts/a に一致しますが、/posts/a/b、/posts/a/b/c などにも一致します。

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

return [
  {
    params: {
      // Statically Generates /posts/a/b/c
      id: ['a', 'b', 'c'],
    },
  },
  //...
];

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

export async function getStaticProps({ params }) {
  // params.id will be like ['a', 'b', 'c']
}

詳細はキャッチオールルートのドキュメントを参照してください。

ルーター

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

404ページ

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

// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>;
}

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

その他の例

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

これで完了です！

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

動的ルーティングの詳細

チャプターを完了しました36