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.

Practice

1. In Next.js config, what does a path matcher do?

easy

A. It changes the page layout globally for all routes.

B. It automatically generates API routes from files.

C. It tells Next.js which URLs should use special rules or middleware.

D. It disables JavaScript on matched pages.

Solution

1. Step 1: Understand the purpose of path matchers

   Path matchers specify which URLs get special handling like middleware or redirects.

2. Step 2: Compare options

   Only It tells Next.js which URLs should use special rules or middleware. correctly describes this behavior; others describe unrelated features.

3. Final Answer:

   It tells Next.js which URLs should use special rules or middleware. -> Option C

4. Quick Check:

   Path matcher = special rules for URLs [OK]

Hint: Matchers select URLs for special handling in config [OK]

Common Mistakes:

• Thinking matchers change layout globally
• Confusing matchers with API route generation
• Assuming matchers disable JavaScript

2. Which of the following is the correct syntax to match the exact path /dashboard in Next.js config?

easy

A. "/dashboard"

B. "/dashboard/*"

C. "dashboard"

D. "/dashboard?"

Solution

1. Step 1: Identify exact path syntax

   Exact path matchers use the full path string without wildcards or extra characters.

2. Step 2: Evaluate options

   "/dashboard" matches exactly "/dashboard". "/dashboard/*" includes a wildcard, C misses the leading slash, D uses an invalid character.

3. Final Answer:

   "/dashboard" -> Option A

4. Quick Check:

   Exact path = "/dashboard" [OK]

Hint: Exact paths need full string with leading slash, no wildcards [OK]

Common Mistakes:

• Adding wildcards for exact matches
• Omitting the leading slash
• Using query-like characters in path

3. Given this Next.js config snippet:

{ matchers: ["/blog/:slug"] }

Which URL will match this pattern?

medium

A. /blog/nextjs-routing

B. /blog

C. /blog/nextjs/routing

D. /blog/

Solution

1. Step 1: Understand dynamic segment ":slug"

   "/blog/:slug" matches paths with one segment after "/blog/", like "/blog/anything".

2. Step 2: Check each URL

   /blog/nextjs-routing has one segment after "/blog/" so it matches. B and D lack the segment. C has two segments after "/blog/", so no match.

3. Final Answer:

   /blog/nextjs-routing -> Option A

4. Quick Check:

   Dynamic segment matches one path part [OK]

Hint: Dynamic :param matches one segment after base path [OK]

Common Mistakes:

• Assuming missing segment matches
• Thinking multiple segments match one param
• Confusing trailing slash with segment

4. You wrote this matcher in Next.js config:

matchers: ["/profile/:id"]

But the middleware does not run on /profile. Why?

medium

A. Because "/profile" matches but middleware is disabled globally.

B. Because "/profile" lacks the required dynamic segment ":id".

C. Because middleware only runs on API routes, not pages.

D. Because the matcher syntax is invalid and causes an error.

Solution

1. Step 1: Analyze matcher requirement

   "/profile/:id" requires a segment after "/profile/" to match.

2. Step 2: Check why "/profile" does not match

   "/profile" has no segment after it, so it does not match the pattern, so middleware won't run.

3. Final Answer:

   Because "/profile" lacks the required dynamic segment ":id". -> Option B

4. Quick Check:

   Missing dynamic segment means no match [OK]

Hint: Dynamic segments must be present in URL to match [OK]

Common Mistakes:

• Thinking matcher syntax is invalid
• Assuming middleware runs on all pages
• Believing global middleware disables matching

5. You want to apply middleware only to all blog posts and their comments paths like /blog/post-1 and /blog/post-1/comments. Which matcher config is correct?

hard

A. ["/blog/:postId", "/blog/:postId/comments"]

B. ["/blog/:postId*"]

C. ["/blog/:postId", "/blog/:postId/comments/*"]

D. ["/blog/:postId", "/blog/:postId/*"]

Solution

1. Step 1: Understand matching blog posts and comments

   We want to match "/blog/:postId" exactly and also any deeper paths like "/blog/:postId/comments".

2. Step 2: Evaluate options

   ["/blog/:postId", "/blog/:postId/*"] uses "/blog/:postId" for posts and "/blog/:postId/*" to match any sub-paths like comments. ["/blog/:postId", "/blog/:postId/comments"] misses sub-path wildcard, B uses invalid syntax, D misses direct post path.

3. Final Answer:

   ["/blog/:postId", "/blog/:postId/*"] -> Option D

4. Quick Check:

   Use base path plus wildcard for sub-paths [OK]

Hint: Use base dynamic path plus wildcard for nested routes [OK]

Common Mistakes:

• Using invalid wildcard syntax
• Missing base path matcher
• Not including wildcard for sub-paths