Matching paths with config in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js config.

NextJS

import [1] from 'next/config';

Drag options to blanks, or click blank then click option'

AgetConfig

BnextConfig

Cconfig

DuseConfig

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'useConfig' instead of 'getConfig'.

Trying to import 'config' directly.

The getConfig function is used to access Next.js runtime configuration.

2fill in blank

medium

Complete the code to get the public runtime config.

NextJS

const { [1] } = getConfig();

Drag options to blanks, or click blank then click option'

AruntimeConfig

BserverRuntimeConfig

CpublicRuntimeConfig

Dconfig

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'serverRuntimeConfig' which is only available on the server.

Using 'runtimeConfig' which is not a direct property.

The publicRuntimeConfig contains config values exposed to the browser.

3fill in blank

hard

Fix the error in the path matching condition.

NextJS

if (path.startsWith([1])) { console.log('Matched'); }

Drag options to blanks, or click blank then click option'

A/api/

Bapi

C'api/'

D'/api/'

Attempts:

3 left

💡 Hint

Common Mistakes

Using unquoted strings causing syntax errors.

Missing the leading slash in the path.

The argument to startsWith must be a string with quotes, like '/api/'.

4fill in blank

hard

Fill both blanks to create a config object with a path and a handler function.

NextJS

const routeConfig = { path: [1], handler: [2] };

Drag options to blanks, or click blank then click option'

A'/dashboard'

B() => console.log('Dashboard')

C'dashboard'

Dfunction handleDashboard() { console.log('Dashboard'); }

Attempts:

3 left

💡 Hint

Common Mistakes

Using unquoted path strings.

Using function declarations instead of expressions.

The path should be a string with quotes, and the handler is a function expression.

5fill in blank

hard

Fill all three blanks to filter routes matching a prefix and map to their paths.

NextJS

const matchedPaths = routes.filter(route => route.[1].startsWith([2])).map(route => route.[3]);

Drag options to blanks, or click blank then click option'

Apath

B'/admin'

Curl

Dhandler

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'url' or 'handler' instead of 'path'.

Not quoting the prefix string.

We filter by the path property starting with '/admin' and then map to the path.