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.