Dynamic Routes
Route parameters, catch-all routes, optional catch-all, and dynamic segments.
Overview
Dynamic routes enable flexible URL patterns in Next.js.
Key Concepts
- Dynamic Segments â
[param]for single values - Catch-All â
[...slug]for multiple segments - Optional Catch-All â
[[...slug]]for optional segments - generateStaticParams â Pre-generate dynamic routes
- Server Components â Access params in server components
Code Examples
// app/blog/[slug]/page.js
export default async function BlogPost({ params }) {
const post = await getPost(params.slug);
return <article>{post.content}</article>;
}
// Generate static params for SSG
export async function generateStaticParams() {
const posts = await getAllPosts();
return posts.map(post => ({ slug: post.slug }));
}
// app/shop/[...slug]/page.js
export default async function ShopPage({ params }) {
// URL: /shop/shoes/nike/air-max
// params.slug = ['shoes', 'nike', 'air-max']
return <div>Path: {params.slug.join('/')}</div>;
}
// Optional catch-all
// app/docs/[[...slug]]/page.js
export default async function DocsPage({ params }) {
// URL: /docs OR /docs/getting-started
// params.slug = undefined OR ['getting-started']
const slug = params.slug?.join('/') || 'index';
return <DocContent slug={slug} />;
}
// Multiple dynamic segments
// app/[category]/[id]/page.js
export default async function ProductPage({ params }) {
const product = await getProduct(params.category, params.id);
return <ProductDetails product={product} />;
}
Practice
Build a blog with dynamic routes and static generation.