Creating Dynamic Routes in Next.js with File-Based Routing

Next.js is a powerful React framework that simplifies modern web development. One of its standout features is file-based routing, which lets you define routes simply by creating files and folders. But what about when you need flexibility ,like dynamic product pages or user profiles? That’s where dynamic routes come in.

In this article, we’ll walk through the concept of dynamic routing in Next.js, how it works, and how to implement it efficiently in your project.

What Is File-Based Routing?

In Next.js, every file inside the pages/ directory becomes a route. For example:

pages/index.js → /
pages/about.js → /about
pages/blog.js → /blog

It’s intuitive and eliminates the need for manual route declarations.

Introducing Dynamic Routes

Now imagine you’re building a blog. You don’t want to manually create a page for every post like post-1.js, post-2.js, etc. Instead, you want to dynamically load content based on the slug or ID.

That’s exactly what dynamic routes are for.

Syntax

To create a dynamic route, wrap the parameter in square brackets:

pages/posts/[slug].js

Now, visiting /posts/my-first-post will render the [slug].js page and give you access to the dynamic parameter slug.

Accessing Route Parameters with `useRouter`

To get the dynamic value (e.g., slug or ID) in your component, use the useRouter hook:

import { useRouter } from 'next/router'

const Post = () => {
const router = useRouter()
const { slug } = router.query

return <h1>Post: {slug}</h1>
}

export default Post

Now, if someone visits /posts/react-routing, the page will show: Post: react-routing

Fetching Data for Dynamic Routes

Next.js allows data fetching at build time or on each request. For static generation, use:

`getStaticPaths` + `getStaticProps`

export async function getStaticPaths() {
const posts = await fetchPosts()
const paths = posts.map(post => ({
params: { slug: post.slug }
}))
return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
const post = await fetchPostBySlug(params.slug)
return { props: { post } }
}

This generates pages ahead of time for each slug, making your app blazing fast and SEO-friendly.

Optional Catch-All Routes

Need even more flexibility? Next.js supports:

Catch-all routes: pages/docs/[...params].js
Optional catch-all: pages/docs/[[...params]].js

These patterns let you match any number of segments, which is great for documentation sites, nested folders, or flexible content structures.

Common Use Cases for Dynamic Routing

Blogs and CMS-driven pages
E-commerce product pages
User profile dashboards
Documentation platforms
Nested content structures

Best Practices for Dynamic Routes

✅ Use clear parameter names ([slug], [id], etc.)
✅ Choose getStaticProps + getStaticPaths for static content like blogs
✅ Use getServerSideProps if the data is user-specific or frequently updated
✅ Keep dynamic routes minimal and SEO-friendly (avoid unnecessary nesting)

Final Thoughts

Dynamic routing in Next.js is incredibly powerful and remarkably simple. With just a few lines of code, you can create scalable, SEO-optimized pages that load fast and support real-world use cases like blogs, e-commerce, or user dashboards. Whether you’re new to Next.js or building your tenth app, mastering dynamic routes is a skill that pays off in every project.

Disclaimer

Article written with the help of AI.

Read the full Disclaimer HERE

Creating Dynamic Routes in Next.js with File-Based Routing