Matching paths with config in NextJS - Step-by-Step Execution

Concept Flow - Matching paths with config

Start with URL path

↓

Check path against config patterns

↓

Match found?

No→Return default or 404

Yes↓

Load matching config settings

↓

Render page or component with config

This flow shows how Next.js checks a URL path against a set of config patterns to find a match and then uses that config to render the page.

Execution Sample

NextJS

const config = {
  '/about': { title: 'About Us' },
  '/blog/:id': { title: 'Blog Post' }
};

function matchPath(path) {
  // returns config for matched path
}

This code tries to find which config matches a given URL path.

Execution Table

Step	Input Path	Config Pattern Checked	Match Result	Action Taken
1	/about	/about	Match	Return { title: 'About Us' }
2	/about	/blog/:id	No Match	Continue checking
3	/blog/123	/about	No Match	Continue checking
4	/blog/123	/blog/:id	Match	Return { title: 'Blog Post' }
5	/contact	/about	No Match	Continue checking
6	/contact	/blog/:id	No Match	No match found, return default or 404

💡 No matching config found for path, so default or 404 is returned

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 4	Final
path	undefined	/about	/about	/blog/123	/contact
matchedConfig	null	{ title: 'About Us' }	{ title: 'About Us' }	{ title: 'Blog Post' }	null

Key Moments - 2 Insights

Why does '/about' match the '/about' pattern but not '/blog/:id'?

Because '/about' exactly matches the '/about' pattern, but does not fit the '/blog/:id' pattern which expects '/blog/' followed by a dynamic segment. See execution_table rows 1 and 2.

How does the matching work for dynamic segments like ':id'?

The ':id' acts as a placeholder that matches any value in that segment of the path. So '/blog/123' matches '/blog/:id' because '123' fills ':id'. See execution_table row 4.

Visual Quiz - 3 Questions

Look at the execution table, what is the matchedConfig after step 1 when path is '/about'?

A { title: 'About Us' }

B { title: 'Blog Post' }

C null

D undefined

💡 Hint

Check execution_table row 1 under 'Action Taken' and variable_tracker for matchedConfig after step 1

At which step does the path '/blog/123' find a matching config?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look at execution_table rows 3 and 4 for '/blog/123' path matching

If the path was '/blog/abc', which config pattern would match?

A /about

B No match

C /blog/:id

D Default config

💡 Hint

Dynamic segment ':id' matches any value after '/blog/', see explanation in key_moments

Concept Snapshot

Matching paths with config in Next.js:
- Define config with static and dynamic path patterns
- Check URL path against each pattern
- Static paths match exactly
- Dynamic segments like ':id' match any value
- Use matched config to render page or fallback to default/404

Full Transcript

This visual execution shows how Next.js matches a URL path to a configuration object. It starts by taking the input path, then checks it against each pattern in the config. If the path matches a static pattern exactly, it returns that config. If the pattern has dynamic segments like ':id', it matches any value in that segment. If no match is found, it returns a default or 404. The execution table traces each step with example paths '/about', '/blog/123', and '/contact'. The variable tracker shows how the matchedConfig changes as the path is checked. Key moments clarify why some paths match certain patterns and not others. The quiz tests understanding of matching steps and dynamic segments.

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