Dynamic, Catch-All, and Parallel Segments
Understand how to implement dynamic, catch-all, and parallel segments in Next.js routing. Learn to manage flexible URLs for blogs, documentation, and dashboards, enabling scalable, maintainable web apps with advanced navigation patterns.
In our last lesson, we covered the basics of creating static routes and shared layouts. But what happens when we need to create pages for hundreds of blog posts, thousands of products, or deeply nested documentation? Creating a folder for each one would be a nightmare.
This is where Next.js’s dynamic routing features come in. In this lesson, we’ll explore three key routing patterns: dynamic, catch-all, and parallel segments. These tools will give us the flexibility to build almost any routing structure imaginable, from simple dynamic pages to complex, multi-view dashboards.
Dynamic segments
So far, we’ve worked with a simple pattern: a file path like app/about/page.js directly creates a URL like /about. But consider a route like /blog/my-first-post. The last part, my-first-post, is a slug that can change.
We can create a template for all blog posts using a dynamic segment, which is a folder name wrapped in square brackets []. Here’s how it works:
We create a folder named
[slug]insideapp/blog/. The[slug]part is a placeholder.Inside it, add our
page.jsfile:app/blog/[slug]/page.js.
This single file will now handle every route that matches the /blog/:something pattern.
Accessing the slug
But how do we know which blog post to show? Next.js passes the dynamic parameters to our page component as a params prop (and from v16 onward this params prop is a Promise, so we await it).
Let’s look at a simple blog post page.
export default function RootLayout({ children }) {
return (
<html>
<body>
<main>{children}</main>
</body>
</html>
);
}Line 4: We must await the
paramsobject to resolve before we can ...