Dynamic route segments in NextJS - Step-by-Step Execution

Concept Flow - Dynamic route segments

User visits URL

↓

Next.js Router checks routes

↓

Match dynamic segment pattern

↓

Extract dynamic value from URL

↓

Pass value as prop to page component

↓

Render page with dynamic data

Next.js matches the URL to a dynamic route pattern, extracts the dynamic part, and passes it to the page component to render content based on that value.

Execution Sample

NextJS

app/blog/[slug]/page.js

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

This code defines a dynamic route where the part in brackets [slug] captures the URL segment and displays it on the page.

Execution Table

Step	URL Visited	Route Pattern Matched	Dynamic Segment Extracted	Component Render Output
1	/blog/hello-world	/blog/[slug]	hello-world	<h1>Post: hello-world</h1>
2	/blog/nextjs-routing	/blog/[slug]	nextjs-routing	<h1>Post: nextjs-routing</h1>
3	/blog/	No match	N/A	404 Page Not Found

💡 Execution stops when no matching route pattern is found or page is rendered with extracted dynamic segment.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3
params.slug	undefined	hello-world	nextjs-routing	undefined

Key Moments - 2 Insights

Why does visiting /blog/ without a slug show a 404 error?

Because the dynamic route expects a segment after /blog/, as shown in execution_table step 3 where no pattern matches and Next.js shows 404.

How does Next.js know what value to pass as params.slug?

Next.js extracts the part of the URL matching the [slug] segment, as seen in execution_table steps 1 and 2 where the dynamic segment is extracted from the URL.

Visual Quiz - 3 Questions

Look at the execution table, what is params.slug when visiting /blog/hello-world?

A "/blog/hello-world"

B "hello-world"

C "blog"

D undefined

💡 Hint

Check execution_table row 1 under Dynamic Segment Extracted column.

At which step does the route pattern fail to match and show a 404?

A Step 3

B Step 1

C Step 2

D None

💡 Hint

Look at execution_table row 3 Route Pattern Matched and Component Render Output.

If the URL is /blog/my-first-post, what will the component render output be?

A 404 Page Not Found

B <h1>Post: blog</h1>

C <h1>Post: my-first-post</h1>

D <h1>Post: /blog/my-first-post</h1>

💡 Hint

Based on execution_table steps 1 and 2, the dynamic segment is shown in the output.

Concept Snapshot

Dynamic route segments in Next.js use brackets [ ] in filenames to capture URL parts.
When a user visits a matching URL, Next.js extracts the dynamic part and passes it as a prop.
The page component uses this prop to render content dynamically.
If the URL does not match the pattern, Next.js shows a 404 page.
Example: app/blog/[slug]/page.js captures 'slug' from /blog/slug.

Full Transcript

Dynamic route segments in Next.js let you create pages that respond to variable URL parts. When a user visits a URL like /blog/hello-world, Next.js matches it to the file app/blog/[slug]/page.js. It extracts 'hello-world' as the slug and passes it to the page component as params.slug. The component then renders content using this slug, for example showing 'Post: hello-world'. If the URL does not include a slug, like /blog/, Next.js cannot match the route and shows a 404 page. This process helps build flexible pages that change based on the URL segment.