Route groups with (groupName) in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Next.js route group?

Consider a Next.js app router with this folder structure:

app/(admin)/dashboard/page.tsx

The (admin) folder is a route group. What URL path will render the dashboard page?

NextJS

app/(admin)/dashboard/page.tsx
export default function Dashboard() {
  return <h1>Admin Dashboard</h1>;
}

A /(admin)/dashboard

B /admin/dashboard

C /dashboard

D /dashboard/admin

💡 Hint

Route groups group routes without adding to the URL path.

Route groups in Next.js app router let you organize routes without affecting the URL. So the (admin) folder does not add 'admin' to the URL path. The dashboard page is at '/dashboard'.

📝 Syntax

intermediate

Which folder name correctly creates a route group in Next.js?

You want to create a route group named 'marketing' in your Next.js app router. Which folder name is valid?

A [marketing]

B <marketing>

C {marketing}

D (marketing)

💡 Hint

Route groups use parentheses in folder names.

Next.js route groups are created by wrapping the folder name in parentheses, like (marketing).

🔧 Debug

advanced

Why does this route group cause a 404 error?

You have this folder structure:

app/(user)/profile/page.tsx

But navigating to '/profile' shows a 404 error. What is the likely cause?

NextJS

app/(user)/profile/page.tsx
export default function Profile() {
  return <p>User Profile</p>;
}

A Route groups cannot contain pages directly

B The app folder must have a layout.tsx file for nested routes to work

C The (user) folder is missing a layout.tsx file

D The profile folder name should be in parentheses

💡 Hint

Next.js app router requires layouts to render nested pages.

In Next.js app router, the app folder needs a root layout.tsx file. Without it, nested routes like (user)/profile/page.tsx won't render and cause 404.

🧠 Conceptual

advanced

What is the main benefit of using route groups in Next.js?

Why would a developer use route groups (folders with parentheses) in a Next.js app router project?

A To organize routes without changing the URL structure

B To create dynamic route parameters

C To enable server-side rendering only for those routes

D To automatically generate API routes

💡 Hint

Think about URL paths and folder structure.

Route groups let you group files and folders for better organization without adding extra segments to the URL path.

❓ state_output

expert

What is the URL path and rendered output for nested route groups?

Given this folder structure:

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

And the page.tsx contains:

export default function Profile() { return <h2>Profile Settings</h2>; }

What URL path shows this page and what is the rendered output?

NextJS

app/(dashboard)/(settings)/profile/page.tsx
export default function Profile() {
  return <h2>Profile Settings</h2>;
}

A URL: /profile, Output: <h2>Profile Settings</h2>

B URL: /(dashboard)/(settings)/profile, Output: <h2>Profile Settings</h2>

C URL: /profile, Output: <h1>Profile Settings</h1>

D URL: /dashboard/settings/profile, Output: <h2>Profile Settings</h2>

💡 Hint

Route groups do not add to the URL path.

Nested route groups do not add segments to the URL. So the URL is '/profile'. The page renders an h2 heading with 'Profile Settings'.