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.