Dynamic Routing in Next.js

Dynamic routing allows pages to be generated based on URL values. Instead of creating separate files for every page, Next.js uses dynamic folders to handle variable routes.

What is a Dynamic Route?

A dynamic route is a route that changes based on URL parameters. It is created using square brackets in the folder name.

app/
 └── blog/
     └── [slug]/
         └── page.jsx

The [slug] folder represents a dynamic value.

How does it work?

export default function BlogPage({ params }) {
  return <h1>Post: {params.slug}</h1>;
}

Visiting /blog/react gives:
params.slug = react

Why use Dynamic Routing?

It allows one page template to handle many URLs, making apps scalable and easier to maintain.

Real-World Example

A blog website uses dynamic routes so every article loads from the same template using a unique slug.

Example URLs:

• /blog/nextjs-routing
• /blog/react-hooks
• /blog/web-performance

Interview Tip

Dynamic routing in Next.js allows reusable page templates that adapt to URL parameters using bracket-based folders.