Careeroza

Layouts

layout.tsx

A layout wraps all pages in its folder and sub-folders. It receives children (the page or nested layout) and stays mounted while you move between those pages, so its state is kept.

app/layout.tsx — the root layout is required and must render <html> and <body>:

import type { Metadata } from 'next';
import './globals.css';

export const metadata: Metadata = {
  title: 'ShopEase',
  description: 'Online shopping for mobiles, books and fashion',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <header>ShopEase</header>
        {children}
        <footer>© 2026 ShopEase</footer>
      </body>
    </html>
  );
}

How Layouts Nest

Example

Layouts wrap each other from the root down to the page. This program builds the same nesting with strings:

type Layout = (children: string) => string;

const rootLayout: Layout = (c) => '<html><body><Navbar/>' + c + '</body></html>';
const productsLayout: Layout = (c) => '<div class="shop"><Filters/>' + c + '</div>';
const page = '<ProductsPage/>';

// Next.js applies layouts from the innermost folder outwards
const chain: Layout[] = [rootLayout, productsLayout];
const html = chain.reduceRight((inner, layout) => layout(inner), page);
console.log(html);

Output

<html><body><Navbar/><div class="shop"><Filters/><ProductsPage/></div></body></html>