Route groups with (groupName) in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a route group named 'admin' in Next.js.

NextJS

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

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

// Place this file inside (admin) folder

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

Apage

BAdminPage

Cdashboard

Dadmin

Attempts:

3 left

💡 Hint

Common Mistakes

Naming the component file something other than 'page' inside the route group folder.

Confusing the folder name with the component name.

In Next.js App Router, the file named page.js or page.tsx defines the route component inside a folder. The folder named with parentheses like (admin) groups routes but the component file must be named page.

2fill in blank

medium

Complete the code to import a component from a route group folder named '(dashboard)'.

NextJS

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

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

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

Adashboard

BPage

Cpage

DDashboardPage

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to import using the folder name directly as the component.

Using incorrect casing in the import name.

You import the component by the name you export it as. Since the component inside page.js is usually a default export with a name like DashboardPage, you import it with that name.

3fill in blank

hard

Fix the error in the route group folder naming to correctly group routes under 'profile'.

NextJS

app/[1]/settings/page.tsx

// This file renders the settings page inside the profile group

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

A(profile)

Bprofile

C[profile]

D{profile}

Attempts:

3 left

💡 Hint

Common Mistakes

Using folder names without parentheses for route groups.

Confusing dynamic route syntax with route groups.

Route groups in Next.js use parentheses around the folder name, like (profile), to group routes without affecting the URL path.

4fill in blank

hard

Fill both blanks to create a route group named 'shop' and a page component inside it.

NextJS

app/[1]/page.tsx

export default function [2]() {
  return <h1>Shop Home</h1>;
}

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

A(shop)

BShopPage

Cshop

Dpage

Attempts:

3 left

💡 Hint

Common Mistakes

Naming the folder without parentheses.

Using 'page' as the component function name instead of a descriptive name.

The route group folder is named with parentheses (shop). The page component inside is a default export function, here named ShopPage.

5fill in blank

hard

Fill all three blanks to create a nested route group '(account)', a page component, and export metadata.

NextJS

app/[1]/page.tsx

export const metadata = [2];

export default function [3]() {
  return <h1>Account Overview</h1>;
}

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

A(account)

B{ title: 'Account' }

CAccountPage

Daccount

Attempts:

3 left

💡 Hint

Common Mistakes

Not using parentheses for the route group folder.

Exporting metadata incorrectly.

Using a generic function name like 'page' instead of a descriptive one.

The folder for the route group uses parentheses (account). Metadata is exported as an object with a title. The component function is named AccountPage.