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.

Practice

1. In Next.js, what does a file named [id].js inside the pages folder represent?

easy

A. A configuration file for setting environment variables

B. A static page that only matches the URL /id

C. A special API route for handling requests with an id parameter

D. A dynamic route segment that matches any value in the URL at that position

Solution

1. Step 1: Understand Next.js routing conventions

   Files inside the pages folder define routes. Square brackets [] indicate dynamic segments.

2. Step 2: Interpret [id].js meaning

   The file [id].js matches any URL segment in that position and passes it as a parameter named id.

3. Final Answer:

   A dynamic route segment that matches any value in the URL at that position -> Option D

4. Quick Check:

   Dynamic route = [segment] [OK]

Hint: Square brackets mean dynamic URL part in Next.js routes [OK]

Common Mistakes:

• Thinking [id].js is a static page
• Confusing dynamic routes with API routes
• Assuming it matches only the literal 'id'

2. Which of the following is the correct syntax to define a dynamic route segment for a Next.js page that captures a username?

easy

A. pages/:username.js

B. pages/username.js

C. pages/[username].js

D. pages/{username}.js

Solution

1. Step 1: Recall Next.js dynamic route syntax

   Dynamic segments use square brackets around the parameter name inside the pages folder.

2. Step 2: Match syntax for username parameter

   The correct syntax is [username].js to capture the username dynamically.

3. Final Answer:

   pages/[username].js -> Option C

4. Quick Check:

   Dynamic segment uses [param] syntax [OK]

Hint: Use square brackets for dynamic route names [OK]

Common Mistakes:

• Using colon or curly braces instead of square brackets
• Naming the file without brackets for dynamic routes
• Confusing dynamic routes with static filenames

3. Given the file structure:
pages/blog/[slug].js
and the URL /blog/hello-world, what will be the value of the slug parameter inside the page component?

medium

A. "hello-world"

B. "blog"

C. "[slug]"

D. undefined

Solution

1. Step 1: Identify dynamic segment from file name

   The file [slug].js captures the URL segment after /blog/ as slug.

2. Step 2: Match URL segment to parameter

   For URL /blog/hello-world, the segment hello-world is assigned to slug.

3. Final Answer:

   "hello-world" -> Option A

4. Quick Check:

   URL segment after folder = slug value [OK]

Hint: Dynamic segment captures URL part matching filename [OK]

Common Mistakes:

• Using folder name as parameter value
• Assuming parameter is the literal filename
• Expecting undefined if parameter not explicitly passed

4. Consider this Next.js dynamic route file: pages/product/[id].js. Which of the following code snippets correctly accesses the id parameter inside the component?

medium

A. const router = useRouter(); const { id } = router.query;

B. const { id } = props.params;

C. const id = useParams().id;

D. const id = getIdFromUrl();

Solution

1. Step 1: Recall how to access route params in Next.js pages

   Next.js uses the useRouter hook from next/router to access query parameters.

2. Step 2: Identify correct syntax for extracting id

   The correct way is const router = useRouter(); const { id } = router.query;.

3. Final Answer:

   const router = useRouter(); const { id } = router.query; -> Option A

4. Quick Check:

   useRouter().query gives dynamic params [OK]

Hint: Use useRouter().query to get dynamic route params [OK]

Common Mistakes:

• Using props.params which is not standard in Next.js pages
• Using useParams() which is from React Router, not Next.js
• Calling undefined functions like getIdFromUrl()

5. You want to create a nested dynamic route in Next.js to handle URLs like /dashboard/user/123 where 123 is a user ID. Which file structure correctly implements this?

hard

A. pages/dashboard/[user]/[id].js

B. pages/dashboard/user/[id].js

C. pages/dashboard/[id].js

D. pages/[dashboard]/user/[id].js

Solution

1. Step 1: Analyze the URL structure

   The URL /dashboard/user/123 has three segments: dashboard, user, and a dynamic id.

2. Step 2: Match file structure to URL segments

   Static segments dashboard and user are folders, and [id].js captures the dynamic user ID.

3. Step 3: Verify options

   pages/dashboard/user/[id].js matches the folder structure exactly. Options B and D incorrectly treat static parts as dynamic. pages/dashboard/[id].js misses the user folder.

4. Final Answer:

   pages/dashboard/user/[id].js -> Option B

5. Quick Check:

   Static folders + [id].js for dynamic segment [OK]

Hint: Match URL parts to folders; dynamic parts use [param].js [OK]

Common Mistakes:

• Making static parts dynamic segments
• Omitting intermediate folders for static URL parts
• Confusing order of folders and dynamic files