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.