Dynamic Routes and Catch-all Segments
Create flexible routes that adapt to dynamic content using dynamic segments and catch-all routes.
Flexible Routing in Next.js
Welcome to dynamic routing in Next.js! Modern web applications often need flexible URLs for content like blog posts, product details, or user profiles.
Instead of creating a separate page for each item, dynamic routes let you use a single page template to handle many different URLs based on their path.
Creating Dynamic Segments
In Next.js, you create a dynamic route by enclosing a folder name in square brackets, like [slug].
This [slug] segment acts as a placeholder. Whatever value is in that part of the URL will be captured and made available to your page component.
- Example:
app/blog/[slug]/page.js - This will match URLs like
/blog/hello-worldor/blog/nextjs-tips.
All lessons in this course
- Dynamic Routes and Catch-all Segments
- Nested Layouts and Route Groups
- Parallel and Intercepting Routes
- Loading and Error UI Conventions