Dynamic Routes ([slug])

Capturing URL parameters to build dynamic pages.

Next.js5 min readConcept 14 of 65

Bracket notation

When you are building an e-commerce site, you can't manually create a folder for every single product (e.g., /product/1, /product/2, etc.).

Instead, Next.js uses Dynamic Routes. By wrapping a folder name in square brackets—such as [id] or [slug]—you tell the router to capture that segment of the URL as a dynamic parameter.

The params prop

When a user visits /blog/my-first-post, and your folder structure is app/blog/[slug]/page.tsx, Next.js routes the request to that page.

Crucially, it extracts the value 'my-first-post' and passes it directly into your page.tsx component via a prop called params.

The Next 15 Promise Rule

Here is the most critical thing to know for modern Next.js (v15+): **the params prop is a Promise**.

Because extracting parameters from the request happens asynchronously during the server rendering lifecycle, you must await the params object before you can read from it: const { slug } = await params;.

Parameter Extraction

Type a custom user ID into the URL bar and hit enter. Watch how the Next.js router extracts the segment, resolves the Promise, and injects it into the Page component.

/users/
"jane_doe"
app/users/[id]/page.tsx
export default async function Page({ params }) {
// Next.js 15 requires awaiting the params Promise
const { id"jane_doe" } = await params;
// Render UI using the ID
User Profile
...
}

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1How do you define a dynamic route segment for a user ID in the App Router?
  2. 2In modern Next.js (v15+), how must you access the 'id' parameter inside a Server Component?

Remember this

  • Wrap a folder name in brackets [id] to create a dynamic route.
  • The extracted value is passed to the component via the params prop.
  • In Next.js 15+, params is a **Promise**. You must await it.
  • You can nest multiple dynamic segments in a single route.

Done with this concept?

Mark it complete to track your progress. No login needed.