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.

Practice

1. What is the main purpose of using route groups with (groupName) in Next.js?

easy

A. To organize routes in folders without changing the URL structure

B. To change the URL path to include the group name

C. To create dynamic routes with parameters

D. To add middleware to specific routes

Solution

1. Step 1: Understand route groups concept

   Route groups use parentheses in folder names to group routes logically without affecting the URL path.

2. Step 2: Compare URL effect

   Since the URL does not include the group name, the main purpose is organization, not URL change.

3. Final Answer:

   To organize routes in folders without changing the URL structure -> Option A

4. Quick Check:

   Route groups = organize without URL change [OK]

Hint: Parentheses folders group routes but keep URLs clean [OK]

Common Mistakes:

• Thinking group name appears in URL
• Confusing with dynamic route parameters
• Assuming it adds middleware automatically

2. Which of the following folder names correctly creates a route group named admin in Next.js?

easy

A. admin

B. (admin)

C. [admin]

D. {admin}

Solution

1. Step 1: Identify route group syntax

   Route groups use parentheses around the folder name, like (groupName).

2. Step 2: Match folder name

   The folder named (admin) correctly creates a route group called admin.

3. Final Answer:

   (admin) -> Option B

4. Quick Check:

   Parentheses folder = route group [OK]

Hint: Use parentheses for route groups, not brackets or braces [OK]

Common Mistakes:

• Using square brackets which are for dynamic routes
• Using curly braces which are invalid
• Omitting parentheses and creating normal folders

3. Given this folder structure in Next.js app router:

app/(dashboard)/page.tsx
app/(dashboard)/settings/page.tsx
app/profile/page.tsx

What URL paths will be available?

medium

A. /, /settings, /profile

B. /(dashboard), /(dashboard)/settings, /profile

C. /dashboard, /dashboard/settings, /profile

D. /dashboard, /settings, /profile

Solution

1. Step 1: Understand route groups effect on URLs

   Folders with parentheses group routes but do not add to URL path.

2. Step 2: Map folder names to URLs

   The (dashboard) group is invisible in URL, so app/(dashboard)/page.tsx maps to / because the page.tsx inside is the root of that group. Similarly, app/(dashboard)/settings/page.tsx maps to /settings. The app/profile/page.tsx maps to /profile.

3. Final Answer:

   /, /settings, /profile -> Option D

4. Quick Check:

   Route groups hide folder name but keep nested paths [OK]

Hint: Route groups hide folder name but keep nested routes [OK]

Common Mistakes:

• Including parentheses folder name in URL
• Ignoring nested folder names inside groups
• Assuming root group maps to root URL

4. You created a folder named (admin) inside app but your routes under it are not working. What is the most likely mistake?

medium

A. You forgot to add a page.tsx file inside the (admin) folder

B. You used square brackets instead of parentheses for the folder name

C. You named the folder admin without parentheses

D. You placed the (admin) folder outside the app directory

Solution

1. Step 1: Check route group folder requirements

   Route groups require a page.tsx or similar file inside to define the route component.

2. Step 2: Identify missing page file issue

   If routes inside (admin) don't work, missing page.tsx is the most common cause.

3. Final Answer:

   You forgot to add a page.tsx file inside the (admin) folder -> Option A

4. Quick Check:

   Missing page.tsx = no route rendered [OK]

Hint: Always add page.tsx inside route group folders [OK]

Common Mistakes:

• Confusing folder naming syntax
• Placing folders outside app directory
• Assuming route groups auto-create pages

5. You want to create two separate route groups (marketing) and (sales) inside app with pages home.tsx and contact.tsx each. How should you organize folders so URLs are /home and /contact without group names in URL?

hard

A. app/(marketing)/home.tsx and app/(sales)/contact/page.tsx

B. app/(marketing)/home.tsx and app/(marketing)/(sales)/contact.tsx

C. app/(marketing)/home.tsx and app/(sales)/contact.tsx

D. app/home.tsx and app/contact.tsx

Solution

1. Step 1: Use route groups to hide folder names

   Folders named with parentheses group routes without adding to URL path.

2. Step 2: Place pages inside separate route groups

   Placing home.tsx inside (marketing) and contact.tsx inside (sales) keeps URLs as /home and /contact.

3. Final Answer:

   app/(marketing)/home.tsx and app/(sales)/contact.tsx -> Option C

4. Quick Check:

   Separate groups hide folder names, URLs stay clean [OK]

Hint: Put pages inside separate parentheses folders for clean URLs [OK]

Common Mistakes:

• Nesting groups causing longer URLs
• Placing pages outside groups losing organization
• Using page.tsx inconsistently inside groups