Next.js Layouts provide persistent visual interfaces that remain mounted across route changes. Layouts preserve component state, prevent expensive re-renders, and allow clean nested UI structures.
A layout file is created by exporting a default React component from a layout.tsx file inside any app/ subfolder.
app/layout.tsx)Every Next.js application requires a Root Layout file. The root layout wraps all pages in your application and defines the global <html> and <body> tags.
// app/layout.tsx
import './globals.css';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
export const metadata = {
title: 'My Application',
description: 'Built with Next.js App Router',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className="flex flex-col min-h-screen bg-gray-50">
<Navbar />
<main className="flex-1 max-w-7xl mx-auto w-full p-4">
{children}
</main>
<Footer />
</body>
</html>
);
}
Adding a layout.tsx inside a subfolder creates a nested layout that applies only to routes within that specific segment:
// app/dashboard/layout.tsx
import Sidebar from '@/components/Sidebar';
export default function DashboardLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="flex">
<Sidebar />
<section className="flex-1 p-6">{children}</section>
</div>
);
}
While Layouts preserve component state across navigation, Templates (template.tsx) create a brand new component instance every time a user navigates between routes.
<html> and <body> tags.Next.js Layouts simplify nested user interfaces. They preserve state during client-side navigation, ensuring fluid user experiences across complex web dashboards.
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With