コンテンツにスキップ

動的ルート

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

規約

動的セグメントは、ファイルまたはフォルダ名を角かっこで囲むことで作成できます。 [segmentName]。たとえば、[id] または [slug] です。

動的セグメントには、useRouterからアクセスできます。

import { useRouter } from 'next/router'
 
export default function Page() {
  const router = useRouter()
  return <p>Post: {router.query.slug}</p>
}

ルートURL例パラメータ
pages/blog/[slug].js/blog/a{ slug: 'a' }
pages/blog/[slug].js/blog/b{ slug: 'b' }
pages/blog/[slug].js/blog/c{ slug: 'c' }

キャッチオールセグメント
ルートURL例パラメータ
pages/shop/[...slug].js/shop/a{ slug: ['a'] }
pages/shop/[...slug].js/shop/a/b{ slug: ['a', 'b'] }
pages/shop/[...slug].js/shop/a/b/c{ slug: ['a', 'b', 'c'] }

オプションのキャッチオールセグメント
ルートURL例パラメータ
pages/shop/[[...slug]].js/shop{ slug: undefined }
pages/shop/[[...slug]].js/shop/a{ slug: ['a'] }
pages/shop/[[...slug]].js/shop/a/b{ slug: ['a', 'b'] }
pages/shop/[[...slug]].js/shop/a/b/c{ slug: ['a', 'b', 'c'] }