Layouts in Next.js

Next.js 143 views Dec 22, 2025 2 min read

Layouts in Next.js allow you to create shared UI that is reused across multiple pages, such as headers, footers, sidebars, and navigation menus. Layouts help keep your application consistent and reduce code duplication.

1. What is a Layout?

A layout is a special file named layout.js (or layout.tsx) used in the App Router (app/ directory).
It wraps pages and persists across route changes.

2. Root Layout

The root layout is required in every Next.js app using the App Router.

Example

app/
├── layout.js
├── page.js

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

Applies to all pages
Includes <html> and <body> tags
Loads global styles

3. Nested Layouts

You can create layouts for specific routes by adding a layout.js file inside a folder.

Example

app/
├── dashboard/
│   ├── layout.js
│   └── page.js

export default function DashboardLayout({ children }) {
  return (
    <section>
      <aside>Sidebar</aside>
      <main>{children}</main>
    </section>
  );
}

This layout will apply only to /dashboard routes.

4. Layout Hierarchy

Layouts are nested automatically based on the folder structure.

Root Layout
  └── Dashboard Layout
        └── Page

Each layout wraps the layout and page below it.

5. Shared UI Behavior

Layouts do not re-render on navigation
State inside layouts is preserved
Improves performance and user experience

6. Using CSS in Layouts

Global styles are usually imported in the root layout.

import './globals.css';

7. Metadata in Layouts

You can define metadata for SEO inside layouts.

export const metadata = {
  title: 'My App',
  description: 'Next.js Layout Example',
};

8. Layouts vs Pages

Feature	Layout	Page
Reusable UI	Yes	No
Persistent	Yes	No
Required	Root layout only	Yes
Contains HTML/Body	Root layout	No

Conclusion

Layouts are a core feature of Next.js that help build structured, consistent, and scalable applications. By using root and nested layouts, you can efficiently manage shared UI across your app.

Some advanced sections are available for Registered Members

← Previous

Link and Navigation

Styling in Next.js