チャプター36

動的ルーティングの詳細

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

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

getStaticPropsと同様に、getStaticPathsは任意のデータソースからデータを取得できます。私たちの例では、getStaticPathsで使用されるgetAllPostIdsは、外部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,
      },
    };
  });
}

開発と本番

開発 (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: {
      // 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 Routesについて説明します。

動的ルーティングの詳細

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