Dynamic route segments in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is rendered by this dynamic route component?

Consider a Next.js app with a file named app/products/[id]/page.jsx containing this code:

export default function ProductPage({ params }) {
  return <h1>Product ID: {params.id}</h1>
}

What will be the rendered output when visiting /products/42?

NextJS

export default function ProductPage({ params }) {
  return <h1>Product ID: {params.id}</h1>
}

A <h1>Product ID: 42</h1>

B <h1>Product ID: params.id</h1>

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

D Error: params is undefined

💡 Hint

Remember that Next.js passes dynamic segment values inside the params object.

In Next.js dynamic routes, the segment name in square brackets becomes a key in the params object. Here, params.id equals '42' when visiting /products/42, so the component renders 'Product ID: 42'.

📝 Syntax

intermediate

Which code correctly defines a dynamic route segment in Next.js?

You want to create a dynamic route for blog posts by ID. Which file name correctly defines this dynamic segment?

A app/blog/[postId]/page.jsx

B app/blog/{postId}/page.jsx

C app/blog/:postId/page.jsx

D app/blog/postId/page.jsx

💡 Hint

Next.js uses square brackets to mark dynamic segments in file names.

Next.js dynamic route segments are defined by wrapping the segment name in square brackets. So [postId] is correct, while {postId} or :postId are invalid syntax.

❓ state_output

advanced

What is the value of params in this nested dynamic route?

Given a Next.js app with the file app/users/[userId]/posts/[postId]/page.jsx containing:

export default function PostPage({ params }) {
  return 
{JSON.stringify(params)}
}

What will be the JSON string rendered when visiting /users/7/posts/15?

NextJS

export default function PostPage({ params }) {
  return <pre>{JSON.stringify(params)}</pre>
}

A {}

B {"userId":"7","postId":"15"}

C {"postId":"15"}

D {"userId":"7/posts/15"}

💡 Hint

Each dynamic segment in the path becomes a key in params with the matched value.

Next.js collects all dynamic segments in the route and passes them as keys in the params object. Here, userId is '7' and postId is '15'.

🔧 Debug

advanced

Why does this dynamic route component cause an error?

This Next.js dynamic route component is in app/profile/[username]/page.jsx and contains:

export default function Profile({ params }) {
  return 
Welcome, {params.user}!
}

Visiting /profile/alice causes an error. Why?

NextJS

export default function Profile({ params }) {
  return <h2>Welcome, {params.user}!</h2>
}

A The component must use useRouter() hook to access params.

B params is undefined because it is not passed to the component.

C params.user is undefined because the dynamic segment is named 'username', not 'user'.

D Dynamic routes cannot have more than one segment.

💡 Hint

Check the dynamic segment name in the file path and how it matches params keys.

The dynamic segment is named 'username', so params has a key 'username'. Accessing params.user is undefined and causes an error.

🧠 Conceptual

expert

How does Next.js handle optional catch-all dynamic routes?

In Next.js, you create a file app/docs/[...slug]/page.jsx to catch all routes under /docs. What is the value of params.slug when visiting /docs (no extra path)?

A [''] (an array with an empty string)

B undefined

C null

D [] (an empty array)

💡 Hint

Optional catch-all routes provide an array of segments or an empty array if none.

Next.js optional catch-all routes ([...slug]) pass params.slug as an array of path segments. If no segments exist (like /docs), it is an empty array [].