Matching paths with config in NextJS - Mini Project: Build & Apply

Matching paths with config

📖 Scenario: You are building a Next.js app that needs to match URL paths to specific configuration settings. This helps your app decide how to behave based on the current path.

🎯 Goal: Create a simple Next.js component that uses a configuration object to match the current path and display the matching config value.

📋 What You'll Learn

Create a configuration object with exact path keys and values

Create a variable to hold the current path string

Use a function to find the config value matching the current path

Render the matched config value inside a React component

💡 Why This Matters

🌍 Real World

Matching URL paths to configuration helps websites show different content or settings depending on where the user is.

💼 Career

Understanding how to map paths to config is useful for building dynamic web apps and routing logic in Next.js and other frameworks.

1

Create the path configuration object

Create a constant called pathConfig that is an object with these exact entries: '/home': 'Home Page', '/about': 'About Us', and '/contact': 'Contact Page'.

NextJS

# Your code here

Hint

Use const to create an object named pathConfig with the exact keys and values.

2

Set the current path variable

Create a constant called currentPath and set it to the string '/about'.

NextJS

const pathConfig = {
  '/home': 'Home Page',
  '/about': 'About Us',
  '/contact': 'Contact Page'
};

# Your code here

Hint

Use const to create a variable named currentPath with the value '/about'.

3

Find the matching config value

Create a constant called matchedConfig and set it to the value in pathConfig that matches the currentPath key.

NextJS

const pathConfig = {
  '/home': 'Home Page',
  '/about': 'About Us',
  '/contact': 'Contact Page'
};

const currentPath = '/about';

# Your code here

Hint

Use bracket notation to get the value from pathConfig using currentPath.

4

Render the matched config in a React component

Create a React functional component called PathDisplay that returns a <div> containing the matchedConfig value.

NextJS

const pathConfig = {
  '/home': 'Home Page',
  '/about': 'About Us',
  '/contact': 'Contact Page'
};

const currentPath = '/about';

const matchedConfig = pathConfig[currentPath];

# Your code here

Hint

Define a function named PathDisplay that returns a <div> with {matchedConfig} inside, and export it as default.

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