動的ルートセグメント

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

規約

動的セグメントは、フォルダ名を角括弧で囲むことで作成できます: [folderName]。例えば、ブログは app/blog/[slug]/page.js のようなルートを含むことができます。ここで [slug] はブログ投稿の動的セグメントです。

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

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

クライアントコンポーネント内

クライアントコンポーネントの page では、プロップからの動的セグメントは 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>
  )
}

または、クライアントコンポーネントは useParams フックを使用して、クライアントコンポーネントツリーのどこからでも params にアクセスできます。

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

動的セグメントは、括弧内に省略記号 (...) を追加することで、後続のセグメントをキャッチオールするように拡張できます: [...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 の型を追加できます。page、layout、route の params を型付けするには、それぞれ PageProps<'/route'>、LayoutProps<'/route'>、または RouteContext<'/route'> を使用します。

ルート params の値は、実行時になるまで値が不明なため、string、string[]、または undefined (オプショナルキャッチオールセグメントの場合) として型付けされます。ユーザーはアドレスバーに任意の URL を入力できます。これらの広範な型は、アプリケーションコードがこれらのすべての可能なケースを処理できるようにするのに役立ちます。

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

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
}

動作

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

例

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 関数に対して複数のネットワーク呼び出しが行われるのを防ぎ、ビルド時間を短縮します。