Why Matching paths with config in NextJS? - Purpose & Use Cases

The Big Idea

Discover how a simple config can save you hours of messy code and bugs!

The Scenario

Imagine building a website where you manually check every URL path to decide what content to show. You write many if-else statements to match paths like '/home', '/about', or '/products/123'.

The Problem

This manual checking is slow, messy, and hard to maintain. Adding new paths means changing many places in your code, and mistakes can cause wrong pages to show or errors.

The Solution

Matching paths with config lets you define all your routes in one place using simple patterns. The framework then automatically matches URLs to the right content, making your code clean and easy to update.

Before vs After

✗ Before

if (path === '/home') { showHome(); } else if (path === '/about') { showAbout(); } else if (path.startsWith('/products/')) { showProductDetail(); }

✓ After

const routes = [{ path: '/home', component: Home }, { path: '/about', component: About }, { path: '/products/:id', component: ProductDetail }]; matchRoute(path, routes);

What It Enables

This approach makes your app scalable and easy to manage, letting you add or change routes without rewriting complex code.

Real Life Example

Think of a store website where new product pages appear automatically just by adding a route pattern, without touching the main code.

Key Takeaways

Manual path checks get complicated and error-prone quickly.

Config-based path matching centralizes route logic for clarity.

It enables easy updates and scalable routing in your app.

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