0Pricing
Next.js 15 Fullstack Web Apps · Lesson

Nested Layouts and Route Groups

Structure your application with nested layouts and organize routes using route groups for better modularity.

Nested Layouts and Route Groups is a free Next.js 15 Fullstack Web Apps lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Next.js 15 Fullstack Web Apps learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Nested Layouts: Shared UI

Welcome! In this lesson, we'll explore two powerful App Router features: Nested Layouts and Route Groups.

Nested layouts allow you to share UI components (like headers, sidebars, or footers) across multiple pages within a specific segment of your application. This helps maintain consistency and reduces code duplication.

How Layouts Work

In Next.js 15 App Router, layouts are defined by creating a layout.tsx file inside a folder.

  • A layout component receives a children prop, which will be the content of the nested route segments (e.g., page.tsx or other nested layouts).
  • Layouts are rendered hierarchically, meaning an outer layout wraps an inner layout.

The Root Layout

Every Next.js App Router project must have a Root Layout. This is the top-most layout.tsx file located directly in your app/ directory.

  • It defines the essential <html> and <body> tags.
  • It applies to all routes in your application.

Root Layout Code

Here's a basic example of the required root layout. Notice how it takes children as a prop.

import './globals.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

Creating a Nested Layout

To create a nested layout, simply add another layout.tsx file inside a subfolder within your app/ directory.

For example, app/dashboard/layout.tsx would create a layout specific to all routes under /dashboard.

Nested Layout Code Example

This example shows a DashboardLayout that wraps its content, adding a navigation bar specific to the dashboard section. The DashboardPage will be rendered within this layout.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <section>
      <nav>
        <h1>Dashboard Nav</h1>
      </nav>
      {children}
    </section>
  );
}

// app/dashboard/page.tsx
export default function DashboardPage() {
  return (
    <div>
      <h2>Welcome to Dashboard</h2>
      <p>This content is inside the DashboardLayout.</p>
    </div>
  );
}

Introducing Route Groups

Route Groups are folders in your app/ directory that don't affect the URL path. They are primarily used for:

  • Organizing routes into logical groups.
  • Applying specific layouts to a subset of routes without changing the URL.

You define a route group by wrapping the folder name in parentheses, like (groupName).

Why Use Route Groups?

Route groups are incredibly useful for:

  • Separate Layouts: Easily apply a unique layout to a specific group of pages (e.g., an (auth) group with a login layout).
  • Project Organization: Keep related routes together for better maintainability.
  • Excluding Segments: Prevent a folder name from appearing in the URL path.

Route Group Layout Example

Here, a (marketing) route group contains its own layout. Any page within this group (like /about) will use this layout, but the URL remains /about, not /marketing/about.

// app/(marketing)/layout.tsx
export default function MarketingLayout({ children }) {
  return (
    <>
      <header>
        <h1>Marketing Site</h1>
      </header>
      <main>
        {children}
      </main>
      <footer>
        <p>&copy; 2024 Marketing</p>
      </footer>
    </>
  );
}

// app/(marketing)/about/page.tsx
export default function AboutPage() {
  return (
    <div>
      <h2>About Us</h2>
      <p>Learn more about our company.</p>
    </div>
  );
}

Layouts & Groups Check

Consider the following Next.js App Router structure:

app/
├── layout.tsx
├── dashboard/
│   ├── layout.tsx
│   └── settings/
│       └── page.tsx
└── (auth)/
    └── login/
        └── page.tsx

Which layout.tsx files would apply to the app/dashboard/settings/page.tsx route?

Recap: Layouts & Groups

You've learned about structuring your Next.js application using Nested Layouts and Route Groups!

  • Nested Layouts (`layout.tsx`) allow you to share UI components across segments of your app, creating a consistent user experience.
  • Route Groups (`(folder)`) help organize your file structure and apply specific layouts to groups of routes without affecting the URL path.

These features are crucial for building scalable and maintainable Next.js applications!

Frequently asked questions

Is the “Nested Layouts and Route Groups” lesson free?

Yes — the full text of “Nested Layouts and Route Groups” is free to read here on the web, and the Next.js 15 Fullstack Web Apps course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Next.js 15 Fullstack Web Apps course, upgrade to CoddyKit PRO.

What will I learn in “Nested Layouts and Route Groups”?

Structure your application with nested layouts and organize routes using route groups for better modularity. You practise Next.js 15 Fullstack Web Apps with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Next.js 15 Fullstack Web Apps?

No prior experience is required. Next.js 15 Fullstack Web Apps on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Nested Layouts and Route Groups” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Next.js 15 Fullstack Web Apps lesson?

Yes. Every Next.js 15 Fullstack Web Apps lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Dynamic Routes and Catch-all Segments
  2. Nested Layouts and Route Groups
  3. Parallel and Intercepting Routes
  4. Loading and Error UI Conventions
← Back to Next.js 15 Fullstack Web Apps