動的ルート

事前に正確なセグメント名が分からず、動的データからルートを作成したい場合は、リクエスト時に埋め込まれる動的セグメントまたはビルド時にプリレンダリングされる動的セグメントを使用できます。

規則

動的セグメントは、フォルダ名を角括弧で囲むことで作成できます: `[folderName]`。例えば、`[id]`または`[slug]`。

動的セグメントは、layout、page、route、およびgenerateMetadata関数への`params`プロップとして渡されます。

例

例えば、ブログには、`app/blog/[slug]/page.js`というルートを含めることができます。ここで`[slug]`はブログ投稿の動的セグメントです。

export default function Page({ params }: { params: { slug: string } }) {
  return <div>My Post: {params.slug}</div>
}

generateStaticParams()のページを参照して、セグメントのパラメータの生成方法を確認してください。

補足: 動的セグメントは、`pages`ディレクトリの動的ルートと同等です。

静的パラメータの生成

generateStaticParams関数は、動的ルートセグメントと組み合わせて使用して、オンデマンドのリクエスト時ではなく、ビルド時にルートを静的に生成することができます。

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
 
  return posts.map((post) => ({
    slug: post.slug,
  }))
}

generateStaticParams関数の主な利点は、データのスマートな取得です。`fetch`リクエストを使用して`generateStaticParams`関数内でコンテンツがフェッチされた場合、リクエストは自動的にメモ化されます。これは、複数の`generateStaticParams`、レイアウト、ページにわたって同じ引数を持つ`fetch`リクエストは一度しか行われないことを意味し、ビルド時間を短縮します。

`pages`ディレクトリから移行する場合は、移行ガイドを参照してください。

詳細情報と高度なユースケースについては、generateStaticParamsサーバー関数のドキュメントを参照してください。

キャッチオールセグメント

動的セグメントは、角括弧内に省略記号を追加することで、後続のセグメントをキャッチオールにすることができます: `[...folderName]`。

例えば、`app/shop/[...slug]/page.js`は`/shop/clothes`と一致しますが、`/shop/clothes/tops`、`/shop/clothes/tops/t-shirts`なども含みます。

オプションのキャッチオールセグメント

キャッチオールセグメントは、パラメータを二重角括弧で囲むことでオプションにすることができます: [[...folderName]]。

例えば、app/shop/[[...slug]]/page.js は、/shop/clothes、/shop/clothes/tops、/shop/clothes/tops/t-shirtsに加えて、/shopにも一致します。

キャッチオールセグメントとオプションのキャッチオールセグメントの違いは、オプションの場合、パラメータを含まないルート（上記の例では/shop）にも一致することです。

TypeScript

TypeScriptを使用する場合、設定されたルートセグメントに応じてparamsの型を追加できます。

export default function Page({ params }: { params: { slug: string } }) {
  return <h1>My Page</h1>
}

参考情報: 将来的には、TypeScriptプラグインによって自動的に行われる可能性があります。