Dynamic Routes & Route Groups
Create [slug] dynamic segments, route groups with (folder), and parallel routes.
Dynamic Segments
Wrap a folder name in square brackets to create a dynamic segment. The value is available in params passed to the page.
// app/products/[id]/page.tsx
export default function ProductPage({ params }: { params: { id: string } }) {
return <h1>Product {params.id}</h1>;
}
// → /products/123 → params.id = '123'Typed Params
Params are always strings in the URL. Parse them explicitly for numeric IDs.
export default async function PostPage({ params }: { params: { slug: string } }) {
const post = await getPostBySlug(params.slug);
if (!post) notFound();
return <article>{post.content}</article>;
}All lessons in this course
- App Router File Conventions
- Server vs Client Components in Next.js
- Dynamic Routes & Route Groups
- Metadata API & SEO in App Router