Parallel routes concept in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a parallel route segment in Next.js.

NextJS

export const metadata = { title: 'Dashboard' };

export default function DashboardLayout({ children }) {
  return <section>[1]{children}</section>;
}

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

A<main>

B<div>

C<header>

D<footer>

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-semantic tags like

instead of

.

Wrapping children in header or footer tags which are not appropriate here.

The <main> tag is used to wrap the main content in a layout, which is common in Next.js layouts including parallel routes.

2fill in blank

medium

Complete the code to import a parallel route segment in Next.js App Router.

NextJS

import [1] from './(admin)/settings/page';

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

ASettingsPage

BSettingsComponent

CSettingsRoute

DSettings

Attempts:

3 left

💡 Hint

Common Mistakes

Using component names that don't match the folder name.

Adding extra suffixes like 'Page' or 'Component' unnecessarily.

When importing a parallel route segment, the folder name is used as the import name, here 'Settings' matches the folder '(admin)/settings'.

3fill in blank

hard

Fix the error in the parallel route segment definition by completing the blank.

NextJS

export default function [1]() {
  return <div>Admin Settings</div>;
}

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

ASettings

BSettingsPage

CAdminSettings

DSettingsLayout

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated function names that confuse the route segment.

Adding 'Page' or 'Layout' suffixes incorrectly.

The function name should match the segment name for clarity and convention, here 'Settings' matches the route segment folder.

4fill in blank

hard

Fill both blanks to correctly define parallel routes in Next.js App Router.

NextJS

export const parallelRoutes = {
  [1]: () => import('./(marketing)/home/page'),
  [2]: () => import('./(admin)/dashboard/page')
};

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

Amarketing

Badmin

Cdashboard

Dhome

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping keys and import folder names.

Using page names instead of folder names as keys.

The keys in the parallelRoutes object represent the route names, matching the folder names 'marketing' and 'admin'.

5fill in blank

hard

Fill all three blanks to create a parallel route layout with metadata and children rendering.

NextJS

export const metadata = { title: '[1]' };

export default function [2]Layout({ children }) {
  return <[3]>{children}</[3]>;
}

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

AAdmin Panel

BAdmin

Cmain

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-semantic tags like

instead of

.

Mismatching function names and metadata titles.

Leaving blanks empty or using incorrect strings.

The metadata title is 'Admin Panel', the function name matches the segment 'Admin', and the children are wrapped in a semantic <section> tag.