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

Need a 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

Need a 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

Need a 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

Need a hint?

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