Sponsor
ChatHubChatHub Use GPT-4, Gemini, Claude 3.5 and more chatbots side-by-side
ここをクリック
Menu

動的ルート

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

規則

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

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

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

import { useRouter } from 'next/router'
 
export default function Page() {
  const router = useRouter()
  return <p>Post: {router.query.slug}</p>
}
ルート例のURLparams
pages/blog/[slug].js/blog/a{ slug: 'a' }
pages/blog/[slug].js/blog/b{ slug: 'b' }
pages/blog/[slug].js/blog/c{ slug: 'c' }

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

動的セグメントは、角括弧内に省略記号を追加することで、後続のセグメントをすべてキャッチするように拡張できます:[...segmentName]

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

ルート例のURLparams
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'] }

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

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

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

キャッチオールオプションのキャッチオールセグメントの違いは、オプションの場合、パラメータのないルート(上記の例では/shop)もマッチすることです。

ルート例のURLparams
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'] }