Page and layout
- React course
- Advanced
- Lesson 3/56
- 4 min
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.
Practice 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.
Starter code
// app/layout.js — RootLayout yaz
// app/page.js — Home yaz
// İki bileşeni de buraya yazSample 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>;
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Why is the root layout important?
- It only writes CSS
- It is called only once
- It contains html and body tags Correct answer
- It holds no state
Explanation: The root layout contains html and body tags.
2 children prop
export default function RootLayout({ ____ }) {
return <html><body>{children}</body></html>;
}export default function RootLayout({ children }) {
return <html><body>{children}</body></html>;
}Explanation: children represents the child page.
3 Page and layout: match the terms
| Term | Meaning |
|---|---|
root layout |
html+body |
nested layout |
Subfolder frame |
children |
Child content |
page.js |
Page content |