Next.js Tutorials
WhatsApp Channel
Join
Facebook Page
Follow

Layouts in Next.js

📘 Next.js 👁 40 views 📅 Dec 22, 2025
⏱ Estimated reading time: 2 min

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

FeatureLayoutPage
Reusable UIYesNo
PersistentYesNo
RequiredRoot layout onlyYes
Contains HTML/BodyRoot layoutNo

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
Register Now
← Previous
Link and Navigation
Next →
Styling in Next.js
Share this Post
🚀 Want to Test Your Knowledge?

Take quizzes related to this topic and see where you stand!

Start Quiz Now
← Back to Tutorials

Popular Competitive Exam Quizzes

GK/GS Quiz | UPSC Exam Quiz | English Grammar Basics Quiz | Science Quiz