Next.js Layouts Explained — Nested and Shared Layouts

DodaTech Updated 2026-06-28 1 min read

In this tutorial, you will learn about Next.js Layouts Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Next.js layouts in the App Router persist across navigations and can be nested, providing consistent UI shells for sections of your application.

What You'll Learn

Root layout for HTML structure
Nested layouts for sections
Layout persistence across routes
Templates for non-persistent UI
Metadata API for SEO

Why It Matters

Layouts prevent re-mounting shared UI on every navigation, improving performance and maintaining scroll position and state across page transitions.

// app/layout.jsx
export const metadata = {
  title: { default: "My App", template: "%s | My App" },
  description: "Built with Next.js",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header className="site-header">
          <nav>{/* Global navigation */}</nav>
        </header>
        {children}
        <footer>Copyright 2026</footer>
      </body>
    </html>
  );
}

// app/dashboard/layout.jsx
import Sidebar from "./Sidebar";

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

// app/dashboard/page.jsx
export const metadata = { title: "Dashboard" };
export default function DashboardPage() {
  return <h1>Welcome to Dashboard</h1>;
}

Expected output: Root layout wraps all pages, dashboard layout adds sidebar for dashboard routes, title renders as "Dashboard | My App".

← Previous Next.js Routing Deep Dive — Links Navigation and Route Groups Next → Next.js Data Fetching Explained — Fetching Data in Server and Client

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Nextjs