What is a dynamic route in Next.js?

Next.jsMiddle~1 min read

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:

All of them are handled by the same file.

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

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

const params = useParams()
// params.slug

A typical pattern:

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

Dynamic routes can work with:

It all depends on how you fetch the data.

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.

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.