How do layouts work in Next.js? | Next.js Interview Questions

What You'll Learn

Root layout
Nested layouts
Layout patterns

Root Layout

code.txtTSX

// app/layout.tsx (required)
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <header>My App</header>
        <main>{children}</main>
        <footer>© 2024</footer>
      </body>
    </html>
  );
}

Nested Layouts

code.txtTSX

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="dashboard">
      <aside>Sidebar</aside>
      <section>{children}</section>
    </div>
  );
}

// app/dashboard/page.tsx uses this layout
// app/dashboard/settings/page.tsx also uses it

Multiple Root Layouts

code.jsJavaScript

app/
├── (marketing)/
│   ├── layout.tsx    ← Marketing layout
│   └── page.tsx
└── (app)/
    ├── layout.tsx    ← App layout
    └── dashboard/
        └── page.tsx

Layout with Metadata

code.txtTSX

import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Dashboard',
  description: 'User dashboard',
};

export default function Layout({ children }) {
  return <div>{children}</div>;
}