2.5K Views

NEXT105 - Layouts & Shared UI

Learn how to create shared layouts in Next.js using layout.js, build persistent UI like headers and footers, and structure applications with nested layouts.

Layouts are one of the most powerful features of the App Router in Next.js.
They allow you to define shared UI that persists across route changes while keeping your code clean and scalable.

What Is a Layout?

A layout is a component that wraps one or more pages and remains persistent during navigation.
Unlike pages, layouts do not re-render when navigating between routes that share the same layout.

Common examples:

  • Header
  • Footer
  • Sidebar
  • Navigation menu

Layouts help avoid repeating the same UI code on every page.

Root Layout

Every Next.js app using the App Router must have a root layout.

File location:

app/layout.js

Example root layout:

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

The children prop represents the active page content.

Shared UI with Layouts

Any UI placed inside a layout will persist between page navigations.

Benefits:

  • Faster navigation
  • Better user experience
  • Less unnecessary re-rendering
  • Cleaner code

This is ideal for elements like navigation bars or dashboards.

Nested Layouts

Next.js supports nested layouts for different sections of your app.

Example structure:

app/
  layout.js
  dashboard/
    layout.js
    page.js
  blog/
    layout.js
    page.js

Each section can have its own layout while still inheriting the root layout.

How Nested Layouts Work

Layouts wrap each other based on folder structure.

Order:

  1. Root layout
  2. Section layout
  3. Page

This allows fine-grained control over UI composition.

Layout vs Page

Key differences:

  • layout.js is persistent
  • page.js re-renders on navigation
  • layouts do not receive route params directly
  • layouts define structure, pages define content

Understanding this distinction is crucial for proper architecture.

Using Components Inside Layouts

Layouts can import and use components like any other React file.

import Navbar from "./components/Navbar";
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Navbar />
        {children}
      </body>
    </html>
  );
}

This keeps layouts clean and reusable.

Common Layout Mistakes

Avoid these mistakes:

  • Putting page-specific logic in layouts
  • Overusing deeply nested layouts
  • Forgetting the children prop
  • Mixing layout and page responsibilities

Layouts should focus on structure, not business logic.

Best Practices

Recommended practices:

  • Keep layouts simple
  • Use layouts for shared UI only
  • Prefer composition over duplication
  • Use nested layouts sparingly

Good layout design improves long-term maintainability.

Summary

In this lesson, you learned:

  • What layouts are in Next.js
  • How the root layout works
  • How to build shared UI
  • Using nested layouts
  • Differences between layouts and pages
  • Common mistakes and best practices

In the next lesson, we will explore data fetching basics and learn how Next.js handles server-side data loading.