Dynamic routing in Next.js is a powerful feature that caters to a variety of use-cases. It offers you the flexibility to generate routes dynamically when you don't know the specific segment names beforehand, or when they are derived from dynamic data.
To denote a dynamic segment, you wrap the folder's name in square brackets, e.g., [folderName]
. These dynamic segments are then passed as the params
prop to layout, page, route, and generateMetadata functions.
Consider a blog application with various posts; each post has a unique slug. The routing for the blog posts could look something like this: app/blog/[slug]/page.js
. Here, [slug]
is the dynamic segment representing individual blog posts. The 'slug' is passed as a parameter to the page component, and it can be used to fetch and display the relevant post data.
// Inside app/blog/[slug]/page.js
export default async function Post({ params }) {
return <div>{params.slug}</div>;
}
To further optimize the dynamic routes, Next.js introduces a generateStaticParams
function, used in combination with dynamic route segments, to generate routes statically at build time. This provides the advantage of faster page load times as pages are prerendered and ready to serve, bypassing any real-time computation or data fetching.
For a more inclusive routing system, Next.js provides 'catch-all' segments, denoted by an ellipsis inside the brackets [...folderName]
. These catch-all segments can match any number of subsequent segments, providing immense flexibility for nested categories or parameters in your URL.
For example, if you're creating a shopping platform with various levels of categorization, you can use a catch-all segment to match the route: app/shop/[...categories]/page.js
. This single route can cater to URLs like /shop/clothes
, /shop/clothes/tops
, /shop/clothes/tops/t-shirts
, and more.
// Inside app/shop/[...categories]/page.js
export default function Category({ params }) {
// params.categories is an array of categories ['clothes', 'tops', 't-shirts']
return (
<div>
{params.categories.join(',')}
</div>
);
}
Additionally, Next.js also supports optional catch-all segments, denoted by double square brackets [[...folderName]]
. This extends the utility of catch-all segments by matching the route even without the parameter. For example, app/shop/[[...categories]]/page.js
will match /shop
, /shop/clothes
, /shop/clothes/tops
, /shop/clothes/tops/t-shirts
, and so on.
Finally, with TypeScript, you can define types for the parameters based on your route configuration. This brings the advantage of type safety and can prevent potential runtime errors.
Dynamic routing in Next.js brings the benefits of flexibility, efficiency, and simplicity to your application routing structure, providing an elegant solution to a multitude of routing scenarios.