Dynamic Routes & Params
Learn to implement dynamic routes to handle variable segments in URLs and access route parameters.
What are Dynamic Routes?
Imagine you have a blog with many posts. Instead of creating a separate page for each post (like /blog/post-1, /blog/post-2), you can use dynamic routes.
Dynamic routes allow you to create pages that respond to variable segments in the URL, making your application scalable and maintainable.
Defining a Basic Dynamic Route
In Next.js App Router, you define a dynamic route segment by wrapping a folder name in square brackets []. For example, to create a dynamic route for blog posts, you'd create a folder named [slug].
app/blog/[slug]/page.js
This structure will match URLs like /blog/first-post, /blog/another-article, etc.
All lessons in this course
- Layouts and Page Components
- Dynamic Routes & Params
- Loading & Error UI
- Route Groups and Nested Layouts