Matching paths with config in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output when matching a dynamic route with config?

Given the Next.js route configuration and a dynamic path, what will the component render?

NextJS

export const dynamicParams = false;

export function generateStaticParams() {
  return [{ slug: 'hello' }, { slug: 'world' }];
}

export default function Page({ params }) {
  return <p>Slug is: {params.slug}</p>;
}

A <p>Slug is: hello</p> for any path, ignoring dynamic params

B <p>Slug is: hello</p> when path is /hello, and <p>Slug is: world</p> when path is /world

C 404 error for any path because dynamicParams is false

D <p>Slug is: undefined</p> for any path

💡 Hint

Consider how generateStaticParams and dynamicParams affect static generation and matching.

With dynamicParams = false, Next.js only matches paths returned by generateStaticParams. So only /hello and /world render the component with correct slug. Other paths 404.

📝 Syntax

intermediate

Which config option correctly disables dynamic route matching in Next.js?

Choose the correct way to disable dynamic route matching in a Next.js route segment config.

A export const dynamicParams = false;

B export const dynamic = false;

C export const disableDynamic = true;

D export const staticParamsOnly = true;

💡 Hint

Check the official Next.js config option for dynamic route control.

The correct config to disable dynamic route matching is dynamicParams = false. Other options are invalid and cause errors or are ignored.

❓ state_output

advanced

What is the output when using catch-all routes with config in Next.js?

Given this catch-all route and config, what will be the output for path /docs/intro/getting-started?

NextJS

export const dynamicParams = true;

export default function Page({ params }) {
  return <p>Docs path: {params.slug.join(' > ')}</p>;
}

A <p>Docs path: intro > getting-started</p>

B <p>Docs path: /docs/intro/getting-started</p>

C <p>Docs path: undefined</p>

D 404 error because dynamicParams is true

💡 Hint

Remember how catch-all routes pass params as arrays and how dynamicParams affects matching.

Catch-all routes pass the matched segments as an array in params.slug. With dynamicParams true, the route matches any path under /docs, so the output joins the segments with ' > '.

🔧 Debug

advanced

Why does this Next.js route always show 404 despite correct params?

Analyze the code and config below. Why does the route show 404 for path /product/123?

NextJS

export const dynamicParams = false;

export function generateStaticParams() {
  return [{ id: '456' }];
}

export default function Page({ params }) {
  return <p>Product ID: {params.id}</p>;
}

A Because dynamicParams must be true to use generateStaticParams

B Because params.id is undefined in the component

C Because generateStaticParams does not include '123', so path is not pre-rendered and dynamicParams is false

D Because generateStaticParams returns wrong key name; it should be 'slug' not 'id'

💡 Hint

Check the interaction between dynamicParams and generateStaticParams.

With dynamicParams = false, Next.js only serves paths returned by generateStaticParams. Since '123' is not in the list, it 404s.

🧠 Conceptual

expert

How does Next.js decide which paths to match when dynamicParams is false and generateStaticParams returns multiple entries?

Explain the matching behavior of Next.js routes when dynamicParams = false and generateStaticParams returns multiple paths. Which paths are served and which cause 404?

A Next.js serves all paths dynamically regardless of generateStaticParams when dynamicParams is false

B All paths matching the route pattern are served, but those not in generateStaticParams show fallback content

C Only the first path returned by generateStaticParams is served; others cause 404

D Only the paths returned by generateStaticParams are served; all others cause 404 because dynamic matching is disabled

💡 Hint

Think about static generation and disabling dynamic routes.

When dynamicParams is false, Next.js disables dynamic route matching and only serves the exact paths returned by generateStaticParams. Any other path returns 404.