Suggest an edit

Improve this article

Refine the answer for “What is a dynamic route in Next.js?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

A **dynamic route in Next.js** is a route where part of the URL **is set by a parameter** instead of a fixed value.

Simply put:

> **One file → an unlimited number of URLs**

---

## How a dynamic route is created

**Square brackets** are used in the folder name:

```txt
app/blog/[slug]/page.tsx
```

Example URLs:

- `/blog/next-js`
- `/blog/react-ssr`
- `/blog/seo-tips`

All of them are handled by **the same file**.

---

## How to get the parameter value

### In a Server Component

```ts
export default function Page({ params }) {
  return <h1>{params.slug}</h1>
}
```

---

### In a Client Component

```ts
'use client'
import { useParams } from 'next/navigation'

const params = useParams()
// params.slug
```

---

## When to use dynamic routes

- articles and a blog
- product cards
- user profiles
- roadmaps and topics
- SEO pages driven by data

---

## Dynamic route + data

A typical pattern:

```ts
const post = await getPostBySlug(params.slug)
if (!post) notFound()
```

- if there is no data → a correct 404
- ideal for SEO

---

## Relation to rendering

Dynamic routes can work with:

- **SSR**
- **SSG**
- **ISR**

It all depends on how you fetch the data.

---

## Frequent mistakes

- confusing `[slug]` and `[[slug]]`
- expecting a route without `page.tsx`
- forgetting to handle 404

---

## Short answer for an interview

> **A dynamic route in Next.js is a route with parameters set through folders in square brackets, which lets a single component handle many URLs.**

Markdown · drag & drop images · ⌘B / ⌘I shortcuts255 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.