Dynamic Routes in Next.js Explained with Example (SEO-Friendly Guide)
Understanding dynamic routes in Next.js is a crucial step in building scalable and flexible applications.It is enable you to load pages based on dynamic data, like IDs, slugs, or usernames, whether you’re building a blog, e-commerce website, or dashboard.
In this guide, we’ll explore what this are, why they matter, and how to use them with real examples.
What Are Dynamic Routes in Next.js?
In standard pages, your file names are fixed, like:
pages/about.js
pages/contact.js
But sometimes you need routes that change depending on data, such as:
- /blog/1
- /blog/2
- /product/shoes
- /user/sadat
This is where it help.
They enable you to create pages where the URL depends on dynamic parameters.
How to Create Dynamic Routes in Next.js
To create this, just wrap the filename inside square brackets:
Example: Creating a Blog Dynamic Route
pages/blog/[id].js
Here, [id] is a dynamic parameter.
Inside this file, you can access the dynamic value using:
Import { useRouter } from ‘next/router’;
export default function BlogDetails() {
const router = useRouter();
const { id } = router.query;
return (
<div>
<h1>Blog ID: {id}</h1>
<p>This page is generated using dynamic routes in Next.js.</p>
</div>
);
}
Now, any URL like /blog/5 or /blog/hello-world will render this page.
Example: Dynamic Product Page
If you run an e-commerce site, you may have product pages like:
- /product/iphone-15
- /product/lenovo-laptop
Create a file:
pages/product/[slug].js
Then:
import { useRouter } from “next/router”;
export default function ProductPage() {
const router = useRouter();
const { slug } = router.query;
return (
<div>
<h1>Product: {slug}</h1>
<p>Rendered using dynamic routes in Next.js.</p>
</div>
);
}
Dynamic Routes with getStaticPaths
For static site generation (SSG), use:
export async function getStaticPaths() {
return {
paths: [
{ params: { id: ‘1’ } },
{ params: { id: ‘2’ } }
],
fallback: false
};
}
export async function getStaticProps({ params }) {
return {
props: { id: params.id }
};
}
This helps Next.js pre-build pages where data is known.
Why Dynamic Routes in Next.js Are Important
- Create unlimited pages from data
- SEO-friendly clean URLs
- Better user experience
- Essential for blogs, shops, portfolios
- Works with SSR & SSG for performance
This is why developers prefer this routes for structured and scalable page routing.
Final Thoughts
If you want to build professional Next.js applications, mastering dynamic routes in Next.js is essential. With simple syntax and powerful features, Next.js makes route handling flexible and beginner-friendly.