Dynamic route segments in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a dynamic route segment in Next.js?

A dynamic route segment is a part of a URL path that can change and is defined using square brackets in the folder name, like [id]/page.js. It allows pages to handle different values dynamically.

beginner

How do you define a dynamic route segment for a user profile page with user ID in Next.js?

Create a file named app/users/[userId]/page.js. The [userId] part is the dynamic segment that captures the user ID from the URL.

intermediate

How can you access the value of a dynamic route segment inside a Next.js page component?

In Next.js App Router, use the <code>params</code> object passed to the page component. For example, <code>function Page({ params }) { const userId = params.userId; }</code>.

intermediate

What is the difference between a dynamic route segment and an optional catch-all route in Next.js?

A dynamic route segment matches one part of the URL (e.g., [id]), while an optional catch-all route (e.g., [[...slug]]) can match zero or more parts, allowing flexible URL depths.

beginner

Why are dynamic route segments useful in building web applications?

They let you create pages that respond to different data or user input without making separate files for each URL, like showing different user profiles or blog posts dynamically.

How do you name a file to create a dynamic route segment for a product ID in Next.js App Router?

A productId.js

B product/[id].js

C [productId]/page.js

D productId/page.js

Dynamic route segments use square brackets around the segment name, so [productId]/page.js is correct.

In Next.js, how do you access the dynamic segment value inside a page component?

A Using <code>getStaticProps</code>

B Using the <code>params</code> object passed as a prop

C Using <code>window.location</code>

D Using <code>useState</code> hook

In the App Router, dynamic segment values are available in the params object passed to the page component.

What does the file name [[...slug]]/page.js represent in Next.js routing?

A An optional catch-all route matching zero or more segments

B A static route named 'slug'

C A dynamic segment matching exactly one segment

D A route that matches only the root URL

Double square brackets with three dots create an optional catch-all route that matches zero or more URL segments.

Which folder structure correctly creates a dynamic route for blog posts by slug in Next.js App Router?

A app/blog/[slug].js

B app/blog/slug/page.js

C app/blog/slug.js

D app/blog/[slug]/page.js

Dynamic segments must be folders with square brackets containing the segment name, so app/blog/[slug]/page.js is correct.

Why should you use dynamic route segments instead of creating many static pages?

A To handle many similar pages with one template dynamically

B To make the app slower

C To avoid using React components

D To disable routing

Dynamic route segments let you use one page template to handle many URLs with different data, making development easier and efficient.

Explain how dynamic route segments work in Next.js and how you use them to create pages that respond to different URL values.

Think about how you make a page that shows different content based on the URL.

Describe the difference between a single dynamic route segment and an optional catch-all route in Next.js routing.

Consider how flexible the URL matching is for each type.

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