Page and layout

Get to know page.tsx and layout.tsx files.

Page and layout together

When a Next.js page renders, the root layout comes first, then nested layouts, and the page sits innermost. {children} passes from each level to the next.

A layout renders once and does not re-render when the page changes. This keeps state during navigation (e.g. a music player keeps playing).

The root layout must contain <html> and <body>; they are not allowed elsewhere.

Nested layout

If you put layout.js in a subfolder, all pages in that folder share the layout. For example, app/dashboard/layout.js adds a sidebar; all pages below see it.

Layouts stack; the root comes first, then the dashboard layout, then the page.

You can use useState in a layout; state is preserved even when the page changes.

Exercise Layout and page

Write RootLayout: destructure { children }, return <html><body>{children}</body></html>, export default RootLayout. Also write Home: render <h1>Home</h1>, export default Home.

Show example solution

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

// app/page.js
export default function Home() {
  return <h1>Home</h1>;
}

Test yourself

Why is the root layout important?
- It only writes CSS
- It is called only once
- It contains html and body tags
- It holds no state
Show answer

It contains html and body tags — The root layout contains html and body tags.

children prop

export default function RootLayout({ ____ }) {
  return <html><body>{children}</body></html>;
}

Show answer

export default function RootLayout({ children }) {
  return <html><body>{children}</body></html>;
}

Page and layout: match the terms

root layout

html+body
nested layout

Subfolder frame
children

Child content
page.js

Page content

Next lesson: Summary - Next.js basics

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies