Chapter 4

Layouts, Nested Routes & Project Structure

Learn how real-world Next.js apps organize pages and reuse layouts.

What is a Layout?

A layout is a shared UI structure that stays the same across multiple pages. For example: sidebar, navbar, footer.

app/layout.tsx → Shared layout for entire app
app/dashboard/layout.tsx → Layout for dashboard pages

1. Root Layout (Global Layout)

This is the main layout that wraps your entire application.

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Navbar />
        {children}
        <Footer />
      </body>
    </html>
  );
}

2. Nested Layouts (Real SaaS Apps)

You can create layouts inside folders to wrap specific pages.

app/dashboard/layout.tsx

export default function DashboardLayout({ children }) {
  return (
    <div className="flex">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

This is how dashboards like admin panels are built.

3. Recommended Project Structure

app/
 ├── layout.tsx
 ├── page.tsx
 ├── about/
 │    └── page.tsx
 ├── chapter/
 │    ├── 1/
 │    ├── 2/
 │    └── 4/
 ├── dashboard/
 │    ├── layout.tsx
 │    └── page.tsx
 components/
 ├── Sidebar.tsx
 ├── Navbar.tsx
 ├── Footer.tsx

Why Layouts are Powerful

Prevents repeating code (Navbar, Sidebar, Footer)
Improves performance and structure
Makes apps scalable
Used in all real SaaS applications

Real World Example

Admin Dashboard → Sidebar + Topbar layout

E-commerce → Navbar + Product layout

SaaS App → Sidebar + Analytics layout

Summary

Layouts help you build reusable UI structures. Nested layouts allow different sections of your app to have different designs while still staying consistent.

Pro Tip

Think of layouts as "wrappers" — they control structure, not content.