Dynamic routes allow you to use a single template to render pages for varying data, such as product IDs or user profiles.
Interactive Simulation Engine
Dynamic Segment Mapping
Click nodes to inspect
Executable Code Workbench
page.tsx
Live Code Editor1// app/blog/[slug]/page.tsx
2
3export default async function BlogPost({ params }) {
4 const { slug } = await params;
5 return <h1>Reading: {slug}</h1>
6}Mental Model
Think of a dynamic route as a wildcard or a placeholder in your URL path that gets filled with real data at runtime.
Why This Exists
To enable large-scale applications where you can't manually create a page for every piece of content (e.g., millions of blog posts).
Critical Note
"Dynamic routes are always dynamic. You can actually pre-generate them at build time using 'generateStaticParams' for performance."