Dynamic Routes
事前にセグメント名が正確にわからず、動的なデータからルートを作成したい場合は、リクエスト時に埋め込まれるDynamic Segmentsを使用するか、またはビルド時に事前レンダリングすることができます。
規約
Dynamic Segmentは、フォルダー名を角括弧で囲むことで作成できます: [folderName]
。例えば、[id]
や[slug]
です。
Dynamic Segmentsは、レイアウト
、ページ
、ルート
、およびgenerateMetadata
関数にparams
プロップとして渡されます。
例
例えば、ブログは次のようなルートを含むことができます:app/blog/[slug]/page.js
。ここで、[slug]
はブログ投稿のためのDynamic Segmentです。
- TypeScript
- JavaScript
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>
}) {
const slug = (await params).slug
return <div>My Post: {slug}</div>
}
export default async function Page({ params }) {
const slug = (await params).slug
return <div>My Post: {slug}</div>
}
ルート | 例のURL | params |
---|---|---|
app/blog/[slug]/page.js | /blog/a | { slug: 'a' } |
app/blog/[slug]/page.js | /blog/b | { slug: 'b' } |
app/blog/[slug]/page.js | /blog/c | { slug: 'c' } |
セグメントのパラメーターを生成する方法については、generateStaticParams()ページをご覧ください。
Good to know
params
プロップはPromiseであるため、async/awaitまたはReactのuse関数を使用して値にアクセスする必要があります。- バージョン14以前では、
params
は同期プロップでした。後方互換性を考慮して、Next.js 15ではまだ同期的にアクセス可能ですが、この動作は今後廃止される予定です。
- バージョン14以前では、
- Dynamic Segmentsは、
pages
ディレクトリのDynamic Routesに相当します。
Generating Static Params
generateStaticParams
関数は、dynamic route segmentsと組み合わせて使用することで、リクエスト時ではなくビルド時に静的に生成することができます。
- TypeScript
- JavaScript
export async function generateStaticParams() {
const posts = await fetch('https://.../posts').then((res) => res.json())
return posts.map((post) => ({
slug: post.slug,
}))
}
export async function generateStaticParams() {
const posts = await fetch('https://.../posts').then((res) => res.json())
return posts.map((post) => ({
slug: post.slug,
}))
}
generateStaticParams
関数の主な利点は、そのデータの賢い取得にあります。generateStaticParams
関数内でfetch
リクエストを使用してコンテンツを取得すると、リクエストは自動的にメモ化されるため、同じ引数を持つfetch
リクエストは複数のgenerateStaticParams
、レイアウト、およびページにわたって一度だけ行われ、ビルド時間が短縮されます。
pages
ディレクトリから移行する場合は、移行ガイドを使用してください。
詳細情報と高度な使用例については、generateStaticParams
サーバー関数ドキュメントをご覧ください。
Catch-all Segments
Dynamic Segmentsは、角括弧内に省略記号を追加することで、後続のすべてのセグメントをキャッチオール段階に拡張できます:[...folderName]
。
例えば、app/shop/[...slug]/page.js
は/shop/clothes
だけでなく、/shop/clothes/tops
、/shop/clothes/tops/t-shirts
などにも一致します。
ルート | 例のURL | params |
---|---|---|
app/shop/[...slug]/page.js | /shop/a | { slug: ['a'] } |
app/shop/[...slug]/page.js | /shop/a/b | { slug: ['a', 'b'] } |
app/shop/[...slug]/page.js | /shop/a/b/c | { slug: ['a', 'b', 'c'] } |
Optional Catch-all Segments
Catch-all Segmentsは、ダブルスクエアブラケットでパラメータを囲むことでオプションにすることができます:[[...folderName]]
。
例えば、app/shop/[[...slug]]/page.js
は、/shop
だけでなく、/shop/clothes
、/shop/clothes/tops
、/shop/clothes/tops/t-shirts
にも一致します。
キャッチオールとオプショナルキャッチオールセグメントの違いは、オプショナルの場合、パラメータなしのルートも一致することです(上記の例では/shop
)。
ルート | 例のURL | params |
---|---|---|
app/shop/[[...slug]]/page.js | /shop | { slug: undefined } |
app/shop/[[...slug]]/page.js | /shop/a | { slug: ['a'] } |
app/shop/[[...slug]]/page.js | /shop/a/b | { slug: ['a', 'b'] } |
app/shop/[[...slug]]/page.js | /shop/a/b/c | { slug: ['a', 'b', 'c'] } |
TypeScript
TypeScriptを使用する場合、構成されたルートセグメントに応じてparams
の型を追加することができます。
- TypeScript
- JavaScript
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>
}) {
return <h1>My Page</h1>
}
export default async function Page({ params }) {
return <h1>My Page</h1>
}
ルート | params の型定義 |
---|---|
app/blog/[slug]/page.js | { slug: string } |
app/shop/[...slug]/page.js | { slug: string[] } |
app/shop/[[...slug]]/page.js | { slug?: string[] } |
app/[categoryId]/[itemId]/page.js | { categoryId: string, itemId: string } |
Good to know: 将来的にTypeScriptプラグインによって自動的に行われるかもしれません。