Dynamic Route Segments

事前にルートセグメント名が明確でなく、動的データからルートを作成したい場合は、リクエスト時に入力されるか、ビルド時に事前レンダリングされるDynamic Segmentを使用できます。

Convention

Dynamic Segmentは、フォルダ名を角括弧で囲むことで作成できます。例えば、ブログでは以下のようなルート app/blog/[slug]/page.js を含めることができます。ここで [slug] はブログ投稿用のDynamic Segmentです。

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return <div>My Post: {slug}</div>
}

Dynamic Segmentは params propとして layout、page、route、および generateMetadata 関数に渡されます。

In Client Components

Client Component page では、propsの動的セグメントは use フックを使用してアクセスできます。

'use client'
import { use } from 'react'
 
export default function BlogPostPage({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = use(params)
 
  return (
    <div>
      <p>{slug}</p>
    </div>
  )
}

別の方法として、Client Componentは useParams フックを使用して、Client Componentツリーのどこからでも params にアクセスできます。

Catch-all Segments

Dynamic Segmentは、括弧内に省略記号を追加することで catch-all 後続セグメントに拡張できます。[...folderName]

例えば、app/shop/[...slug]/page.js は /shop/clothes にマッチするだけでなく、/shop/clothes/tops、/shop/clothes/tops/t-shirts なども対応します。

Optional Catch-all Segments

Catch-all Segmentは、パラメータを二重角括弧で囲むことにより optional にできます。[[...folderName]]

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

catch-all と optional catch-all セグメントの違いは、optional の場合、パラメータなしのルートもマッチすることです（上記の例では /shop）。

TypeScript

TypeScriptを使用する場合、設定されたルートセグメントに応じて params に型を追加できます。ページ、レイアウト、およびルートでそれぞれ params に型付けするには、PageProps<'/route'>、LayoutProps<'/route'>、または RouteContext<'/route'> を使用してください。

Route params の値は、実行時までその値が不明であるため、string、string[]、または undefined（optional catch-all セグメント用）として型付けされます。ユーザーはアドレスバーに任意のURLを入力できるため、これらの広い型は、アプリケーションコードがこれらすべての可能なケースを処理することを保証するのに役立ちます。

[locale] パラメータなど、既知の言語コードのセットを持つ固定数の有効な値のみを持つことができるルートで作業している場合、実行時検証を使用して、ユーザーが入力する可能性のある無効なparamsを処理し、既知セットからの狭い型でアプリケーションの残りの部分を機能させることができます。

import { notFound } from 'next/navigation'
import type { Locale } from '@i18n/types'
import { isValidLocale } from '@i18n/utils'
 
function assertValidLocale(value: string): asserts value is Locale {
  if (!isValidLocale(value)) notFound()
}
 
export default async function Page(props: PageProps<'/[locale]'>) {
  const { locale } = await props.params // locale is typed as string
  assertValidLocale(locale)
  // locale is now typed as Locale
}

Behavior

• params propはpromiseであるため、値にアクセスするには async/await またはReactの use 関数を使用する必要があります。
  • バージョン14以前では、params は同期的なpropでした。下位互換性を実現するため、Next.js 15では引き続き同期的にアクセスできますが、この動作は将来非推奨になります。

Examples

With generateStaticParams

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 関数の複数のネットワーク呼び出しを回避し、ビルド時間を短縮します。