Route groups with (groupName) in NextJS - Mini Project: Build & Apply

Next.js Route Groups with (groupName)

📖 Scenario: You are building a simple website with Next.js. You want to organize your routes using route groups to keep your URL paths clean and easy to understand.

🎯 Goal: Create a Next.js app with route groups using (groupName) folders to organize pages without affecting the URL structure.

📋 What You'll Learn

Create a route group folder named (dashboard) inside the app directory

Inside (dashboard), create a page called page.tsx that renders a heading

Create a route group folder named (profile) inside the app directory

Inside (profile), create a page called page.tsx that renders a heading

Use the route groups so that the URLs are /dashboard and /profile without the group folder names in the URL

💡 Why This Matters

🌍 Real World

Route groups help developers organize large Next.js apps by grouping related pages together without adding extra URL segments. This keeps URLs clean and user-friendly.

💼 Career

Understanding route groups is important for Next.js developers to build scalable and maintainable web applications with clear folder structures and accessible layouts.

1

Create the (dashboard) route group folder and page

Inside the app directory, create a folder named (dashboard). Then create a file named page.tsx inside (dashboard) with a React component that returns an <h1> heading with the text Dashboard Page.

NextJS

// Create the (dashboard) folder and page.tsx with a heading

Need a hint?

Remember to use parentheses around the folder name to create a route group: (dashboard).

2

Create the (profile) route group folder and page

Inside the app directory, create a folder named (profile). Then create a file named page.tsx inside (profile) with a React component that returns an <h1> heading with the text Profile Page.

NextJS

app/(dashboard)/page.tsx

export default function DashboardPage() {
  return Dashboard Page;
}

// Create the (profile) folder and page.tsx with a heading

Need a hint?

Use parentheses around the folder name (profile) to create the route group.

3

Add a layout file inside (dashboard) to wrap its pages

Inside the (dashboard) folder, create a file named layout.tsx. This layout should be a React component that accepts children and returns a <section> element with an aria-label of Dashboard Section wrapping the children.

NextJS

app/(dashboard)/page.tsx

export default function DashboardPage() {
  return Dashboard Page;
}

app/(profile)/page.tsx

export default function ProfilePage() {
  return Profile Page;
}

// Create layout.tsx inside (dashboard) with a section wrapping children

Need a hint?

The layout component wraps its children and adds semantic HTML with aria-label for accessibility.

4

Add a layout file inside (profile) to wrap its pages

Inside the (profile) folder, create a file named layout.tsx. This layout should be a React component that accepts children and returns a <section> element with an aria-label of Profile Section wrapping the children.

NextJS

app/(dashboard)/layout.tsx

import type { ReactNode } from 'react';

export default function DashboardLayout({ children }: { children: ReactNode }) {
  return {children};
}

app/(dashboard)/page.tsx

export default function DashboardPage() {
  return Dashboard Page;
}

app/(profile)/page.tsx

export default function ProfilePage() {
  return Profile Page;
}

// Create layout.tsx inside (profile) with a section wrapping children

Need a hint?

Use the same pattern as the dashboard layout but change the aria-label to Profile Section.