Matching paths with config in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js config.

NextJS

import [1] from 'next/config';

Drag options to blanks, or click blank then click option'

AgetConfig

BnextConfig

Cconfig

DuseConfig

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'useConfig' instead of 'getConfig'.

Trying to import 'config' directly.

The getConfig function is used to access Next.js runtime configuration.

2fill in blank

medium

Complete the code to get the public runtime config.

NextJS

const { [1] } = getConfig();

Drag options to blanks, or click blank then click option'

AruntimeConfig

BserverRuntimeConfig

CpublicRuntimeConfig

Dconfig

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'serverRuntimeConfig' which is only available on the server.

Using 'runtimeConfig' which is not a direct property.

The publicRuntimeConfig contains config values exposed to the browser.

3fill in blank

hard

Fix the error in the path matching condition.

NextJS

if (path.startsWith([1])) { console.log('Matched'); }

Drag options to blanks, or click blank then click option'

A/api/

Bapi

C'api/'

D'/api/'

Attempts:

3 left

💡 Hint

Common Mistakes

Using unquoted strings causing syntax errors.

Missing the leading slash in the path.

The argument to startsWith must be a string with quotes, like '/api/'.

4fill in blank

hard

Fill both blanks to create a config object with a path and a handler function.

NextJS

const routeConfig = { path: [1], handler: [2] };

Drag options to blanks, or click blank then click option'

A'/dashboard'

B() => console.log('Dashboard')

C'dashboard'

Dfunction handleDashboard() { console.log('Dashboard'); }

Attempts:

3 left

💡 Hint

Common Mistakes

Using unquoted path strings.

Using function declarations instead of expressions.

The path should be a string with quotes, and the handler is a function expression.

5fill in blank

hard

Fill all three blanks to filter routes matching a prefix and map to their paths.

NextJS

const matchedPaths = routes.filter(route => route.[1].startsWith([2])).map(route => route.[3]);

Drag options to blanks, or click blank then click option'

Apath

B'/admin'

Curl

Dhandler

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'url' or 'handler' instead of 'path'.

Not quoting the prefix string.

We filter by the path property starting with '/admin' and then map to the path.

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