Matching paths with config in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does 'matching paths with config' mean in Next.js routing?

It means defining rules or patterns in a configuration to decide how URLs (paths) are handled or matched to specific pages or components.

beginner

How do you define a dynamic route in Next.js using file system routing?

You create a file or folder with square brackets, like [id].js, to match any value in that part of the URL path.

intermediate

What is the purpose of a next.config.js file in Next.js?

It lets you customize Next.js behavior, including how paths are matched or rewritten before rendering pages.

intermediate

How can you rewrite paths in Next.js without changing the URL shown to users?

By using the rewrites() function in next.config.js to map one path to another internally.

intermediate

What is the difference between a rewrite and a redirect in Next.js path config?

A rewrite changes the path internally without changing the URL in the browser. A redirect changes the URL the user sees and navigates to.

In Next.js, how do you create a route that matches any user ID in the URL?

A Use a regular expression in <code>next.config.js</code>

B Add a route in <code>routes.js</code>

C Create a file named <code>[userId].js</code> inside the pages folder

D Use a query parameter in the URL

Next.js uses file system routing where square brackets define dynamic segments like [userId].js.

What does the rewrites() function in next.config.js do?

A Changes the URL shown in the browser

B Maps one path to another internally without changing the URL

C Redirects users to a new URL

D Deletes unused routes

Rewrites let you serve content from a different path internally while keeping the URL unchanged.

Which file is used to configure path matching rules in Next.js?

A next.config.js

B package.json

C routes.config.js

D server.js

The next.config.js file is where you customize Next.js settings including path matching.

What happens if you define a redirect in Next.js path config?

A The URL in the browser changes to the new path

B The URL stays the same but content changes

C The page reloads without changing URL

D Nothing happens

Redirects send the user to a new URL and update the browser's address bar.

How can you match multiple paths with one config rule in Next.js?

A Create a separate config file for each path

B Write multiple <code>if</code> statements in <code>next.config.js</code>

C Use CSS selectors

D Use wildcards or dynamic segments in file names

Dynamic segments like [param] or catch-all routes [...param] match multiple paths.

Explain how Next.js matches URL paths to pages using file system routing and config.

Think about how URLs map to files and how config can change that mapping.

Describe how you would use next.config.js to rewrite a path internally without changing the browser URL.

Focus on internal path mapping versus user-visible URL changes.

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