Next.js Dynamic Routes and Slugs: A Developer Guide

Next.js uses file-system routing with bracket syntax for dynamic segments: [slug].

Basic Dynamic Route

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

Generate Static Params

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

Catch-All Routes

[...slug] matches /a/b/c. [[...slug]] also matches the root.

Generate Slugs

Use our URL slug generator or kebab-case converter.