Dynamic routes with [param] in NextJS - Step-by-Step Execution

Concept Flow - Dynamic routes with [param]

User visits URL

↓

Next.js checks pages folder

↓

Matches dynamic route file: [param

↓

Extracts param from URL

↓

Passes param as prop to component

↓

Component renders with param value

↓

Page shown with dynamic content

Next.js matches the URL to a dynamic route file, extracts the parameter, and renders the page using that parameter.

Execution Sample

NextJS

export default function Page({ params }) {
  return <h1>Hello, {params.name}!</h1>
}

// URL: /hello

This component renders a greeting using the dynamic 'name' parameter from the URL.

Execution Table

Step	Action	URL	Param Extracted	Component Output
1	User visits URL	/hello	-	-
2	Next.js checks pages folder	/hello	-	-
3	Matches dynamic route file [name].js	/hello	name = 'hello'	-
4	Passes param to component	/hello	name = 'hello'	-
5	Component renders	/hello	name = 'hello'	<h1>Hello, hello!</h1>
6	Page shown to user	/hello	name = 'hello'	<h1>Hello, hello!</h1>

💡 Page rendered with param 'hello' and displayed to user.

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
params.name	undefined	'hello'	'hello'	'hello'

Key Moments - 3 Insights

How does Next.js know which part of the URL is the param?

Next.js uses the file name with brackets [param] to identify the dynamic part. In the execution_table at Step 3, it extracts 'hello' from the URL as the param.

What happens if the URL does not match any dynamic route?

Next.js will show a 404 page because no matching file is found. This is implied by the absence of a matching param in the execution_table.

Why is the param passed as a prop to the component?

The param is passed so the component can use it to render dynamic content. See Step 4 and 5 in the execution_table where the param is passed and used in rendering.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'params.name' at Step 4?

A 'name'

B undefined

C 'hello'

D null

💡 Hint

Check the 'Param Extracted' column at Step 3 and 'Action' at Step 4 in the execution_table.

At which step does the component actually render the output?

A Step 5

B Step 4

C Step 3

D Step 6

💡 Hint

Look at the 'Component Output' column in the execution_table.

If the URL was '/world', what would 'params.name' be?

A 'hello'

B 'world'

C undefined

D null

💡 Hint

Refer to the variable_tracker and how 'params.name' changes based on URL param.

Concept Snapshot

Dynamic routes in Next.js use files named with [param].js
The param is extracted from the URL and passed as a prop
The component uses this param to render dynamic content
Example: /hello matches [name].js with name='hello'
This enables pages to respond to many URLs with one file

Full Transcript

Dynamic routes in Next.js let you create pages that change based on the URL. When a user visits a URL like /hello, Next.js looks for a file named with brackets like [name].js. It extracts 'hello' as the parameter 'name' and passes it to the page component. The component then renders content using this parameter, for example showing 'Hello, hello!'. This process allows one file to handle many URLs dynamically. The execution steps show how Next.js matches the URL, extracts the param, passes it to the component, and renders the page. Variables like params.name update to hold the current URL part. This is a simple way to build dynamic pages without writing many files.

Practice

1. What does the file name [id].js inside the pages folder in Next.js represent?

easy

A. A static page named literally 'id'

B. A dynamic route where id is a variable part of the URL

C. A special API route for handling requests

D. A CSS module file for styling

Solution

1. Step 1: Understand Next.js dynamic route naming

   Files with names in square brackets like [id].js represent dynamic routes where the part inside brackets is a variable.

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

   This means the URL can have any value in place of id, and the page will render accordingly.

3. Final Answer:

   A dynamic route where id is a variable part of the URL -> Option B

4. Quick Check:

   Dynamic route = [param] file name [OK]

Hint: Square brackets mean dynamic URL part [OK]

Common Mistakes:

• Thinking it's a static page named 'id'
• Confusing with API routes
• Assuming it's a styling file

2. Which of the following is the correct way to access the dynamic parameter slug in a Next.js page component inside pages/[slug].js?

easy

A. const { slug } = props.params;

B. const slug = params.slug;

C. const slug = useRouter().query.slug;

D. const slug = window.location.slug;

Solution

1. Step 1: Recall how to get dynamic params in Next.js client-side

   Next.js provides the useRouter hook to access route parameters via router.query.

2. Step 2: Identify correct syntax

   The correct way is const slug = useRouter().query.slug; to get the dynamic slug value.

3. Final Answer:

   const slug = useRouter().query.slug; -> Option C

4. Quick Check:

   useRouter().query.param gets dynamic route param [OK]

Hint: Use useRouter().query.param for dynamic params [OK]

Common Mistakes:

• Trying to destructure from props.params directly
• Using window.location which doesn't have slug
• Using undefined variable params

3. Given the file pages/blog/[postId].js with this code:

import { useRouter } from 'next/router';
export default function Post() {
  const router = useRouter();
  return <div>Post ID: {router.query.postId}</div>;
}

What will be rendered when the user visits /blog/42?

medium

A. Post ID: postId

B. Error: router is undefined

C. Post ID: undefined

D. Post ID: 42

Solution

1. Step 1: Understand dynamic route matching

   The file [postId].js matches URLs like /blog/42 and sets postId to '42'.

2. Step 2: Check how router.query.postId is used

   The component uses router.query.postId to display the dynamic value, so it will show '42'.

3. Final Answer:

   Post ID: 42 -> Option D

4. Quick Check:

   Dynamic param value shown = 42 [OK]

Hint: router.query.param shows URL dynamic value [OK]

Common Mistakes:

• Expecting literal 'postId' string output
• Assuming undefined because of initial render
• Thinking router is not defined

4. You have a dynamic route file pages/product/[productId].js. The component tries to access params.productId directly but gets an error. What is the likely cause?

medium

A. The component should use useRouter().query.productId instead of params.productId

B. The file name should be productId.js without brackets

C. Dynamic routes do not support parameters

D. You must import params from 'next/params'

Solution

1. Step 1: Identify how to access dynamic params in client components

   In Next.js, dynamic route params are accessed via useRouter().query in client components, not directly from params.

2. Step 2: Understand why params.productId causes error

   Using params.productId without proper context or props causes undefined errors.

3. Final Answer:

   The component should use useRouter().query.productId instead of params.productId -> Option A

4. Quick Check:

   Use useRouter().query for dynamic params [OK]

Hint: Use useRouter().query, not params directly [OK]

Common Mistakes:

• Trying to access params without props or hooks
• Renaming file incorrectly
• Expecting automatic import of params

5. You want to create a dynamic route in Next.js that matches URLs like /user/123/profile. Which folder and file structure inside app directory correctly implements this using dynamic segments?

hard

A. app/user/[id]/profile/page.js

B. app/user/profile/[id].js

C. app/user/[id]-profile/page.js

D. app/user/[id]/profile.js

Solution

1. Step 1: Understand Next.js app router folder structure

   Each folder represents a URL segment. Dynamic segments use square brackets like [id].

2. Step 2: Map URL /user/123/profile to folders

   The URL has three parts: 'user', dynamic '123', and 'profile'. So folders should be user/[id]/profile with a page.js inside.

3. Final Answer:

   app/user/[id]/profile/page.js -> Option A

4. Quick Check:

   Dynamic folder inside URL path = [param] folder [OK]

Hint: Dynamic segments are folders with [param] in app router [OK]

Common Mistakes:

• Placing dynamic param after static folder incorrectly
• Using dash instead of folder for dynamic segment
• Putting dynamic param in wrong folder level