SlugGenerator.app

Next.jsダイナミックルートとスラッグ：開発者ガイド

4 分で読了

Next.jsはファイルシステムルーティングとブラケット構文を使い、動的セグメントを定義します：[slug]。

基本的なダイナミックルート

// app/blog/[slug]/page.tsx
export default function BlogPost({ params }: { params: { slug: string } }) {
  return <h1>{params.slug}</h1>;
}

静的パラメータの生成

export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map(post => ({ slug: post.slug }));
}

キャッチオールルート

[...slug]は/a/b/cにマッチします。[[...slug]]はルートパスにもマッチします。

スラッグを生成

URLスラッグジェネレーターまたはケバブケースコンバーターをご利用ください。