Dynamic routes with [param] in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this dynamic route component render?

Given the Next.js dynamic route file app/products/[id]/page.tsx with this code, what will be rendered when navigating to /products/42?

NextJS

import { useParams } from 'next/navigation';

export default function ProductPage() {
  const params = useParams();
  return <main><h1>Product ID: {params.id}</h1></main>;
}

A <main><h1>Product ID: {id}</h1></main>

B <main><h1>Product ID: </h1></main>

C <main><h1>Product ID: undefined</h1></main>

D <main><h1>Product ID: 42</h1></main>

💡 Hint

Remember that useParams() returns an object with the dynamic route parameters.

The useParams hook returns an object with keys matching the dynamic route segments. Here, params.id is '42' when visiting /products/42, so it renders 'Product ID: 42'.

📝 Syntax

intermediate

Which option correctly defines a dynamic route file for a username parameter?

You want to create a dynamic route in Next.js to handle URLs like /profile/john. Which filename is correct to capture the username as a parameter?

A app/profile/username/page.tsx

B app/profile/[username]/page.tsx

C app/profile/{username}/page.tsx

D app/profile/:username/page.tsx

💡 Hint

Next.js uses square brackets to define dynamic route segments.

Next.js dynamic routes use square brackets around the parameter name. So [username] is correct, others are invalid syntax.

❓ state_output

advanced

What is the output of this dynamic route component with optional catch-all?

Consider this Next.js dynamic route component in app/blog/[...slug]/page.tsx. What will it render when visiting /blog/2023/06/nextjs?

NextJS

import { useParams } from 'next/navigation';

export default function BlogPage() {
  const { slug } = useParams();
  return <main><h1>Slug: {Array.isArray(slug) ? slug.join(' / ') : slug}</h1></main>;
}

A <main><h1>Slug: 2023 / 06 / nextjs</h1></main>

B <main><h1>Slug: 2023,06,nextjs</h1></main>

C <main><h1>Slug: 2023-06-nextjs</h1></main>

D <main><h1>Slug: undefined</h1></main>

💡 Hint

Catch-all routes receive an array of path segments in the parameter.

The catch-all parameter slug is an array of strings ['2023', '06', 'nextjs']. Joining with ' / ' produces '2023 / 06 / nextjs'.

🔧 Debug

advanced

Why does this dynamic route component throw an error?

This Next.js dynamic route component in app/user/[id]/page.tsx throws an error when visiting /user/123. What is the cause?

NextJS

import { useParams } from 'next/navigation';

export default function UserPage() {
  const id = useParams().id;
  return <main><h1>User ID: {id.toUpperCase()}</h1></main>;
}

A id is undefined, so calling toUpperCase() causes a TypeError

B useParams() returns a number, so toUpperCase() is not a function

C The component is missing a return statement

D Dynamic routes cannot use useParams() in Next.js

💡 Hint

Check if id is always defined and its type before calling string methods.

If id is undefined (e.g., route not matched properly), calling toUpperCase() on undefined causes a TypeError.

🧠 Conceptual

expert

How does Next.js handle dynamic route parameters in server components?

In Next.js App Router, how are dynamic route parameters accessed inside a server component located at app/posts/[postId]/page.tsx?

A You must use the useParams() hook inside the server component

B You import the parameters from 'next/params' module

C They are passed as a prop named 'params' to the server component

D Dynamic parameters are not accessible in server components

💡 Hint

Server components receive route params as props automatically.

In Next.js App Router, server components receive a 'params' prop containing dynamic route parameters. useParams() is for client components.

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