🏠 Next.js Layouts and Templates: Building Your Website’s Blueprint
Imagine you’re building a house. Every room needs walls, a ceiling, and a floor. But you don’t rebuild these for every single room, right? You build them once and then customize what goes inside each room. That’s exactly what Layouts do in Next.js!
🎯 What You’ll Learn
Think of this guide as a treasure map. We’ll explore:
- How layouts wrap your pages like a cozy blanket
- The special “Root Layout” that holds everything
- How to nest layouts like Russian dolls
- The magic props that layouts receive
- Templates vs Layouts (sneaky differences!)
- Making things pretty with CSS
📦 Layouts Overview
The Big Idea
A layout is like a picture frame. The frame stays the same, but you can swap out the picture inside!
graph TD A["Layout"] --> B["Header stays same"] A --> C["Page Content CHANGES"] A --> D["Footer stays same"]
Real-Life Example
When you visit YouTube:
- The top bar (search, logo) = stays the same
- The sidebar (menu) = stays the same
- The middle videos = changes when you click!
That unchanging part? That’s the layout!
Code Example
// app/layout.js
export default function Layout({ children }) {
return (
<div>
<header>🏠 My Website</header>
{children}
<footer>© 2024</footer>
</div>
);
}
What’s happening?
children= the page that changes- Everything else = stays put!
🌳 Root Layout
The Boss of All Layouts
The Root Layout is special. It’s like the foundation of your house. Every single page in your app lives inside it!
It MUST have two things:
<html>tag<body>tag
// app/layout.js (Root Layout)
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
Why Is It Special?
| Regular Layout | Root Layout |
|---|---|
| Optional | Required |
| Can skip | Cannot skip |
| No html/body | Must have html/body |
| Many possible | Only ONE |
🎪 Think of it this way: Root Layout is the circus tent. Everything happens inside it!
🪆 Nested Layouts
Layouts Inside Layouts!
Just like Russian dolls (matryoshka), you can put layouts inside layouts!
graph TD A["Root Layout"] --> B["Dashboard Layout"] B --> C["Settings Layout"] C --> D["Page Content"]
How It Works
app/
├── layout.js ← Root Layout
├── dashboard/
│ ├── layout.js ← Dashboard Layout
│ └── settings/
│ ├── layout.js ← Settings Layout
│ └── page.js ← Actual Page
Real Example
// app/dashboard/layout.js
export default function DashboardLayout({ children }) {
return (
<div>
<nav>📊 Dashboard Menu</nav>
<main>{children}</main>
</div>
);
}
Magic Result:
- Dashboard pages get the dashboard menu
- Other pages don’t!
🎁 Layout Props
What Does a Layout Receive?
Layouts get a special gift called children. It’s the content that goes inside!
export default function Layout({ children }) {
// children = whatever page is being shown
return <div>{children}</div>;
}
The Props Available
| Prop | What It Is |
|---|---|
children |
The page or nested layout |
💡 Simple rule:
childrenis always the “stuff inside”!
Example With Styling
export default function Layout({ children }) {
return (
<div className="container">
<aside>Sidebar</aside>
<main>{children}</main>
</div>
);
}
⚔️ Templates vs Layouts
The Sneaky Difference!
They look the same… but they act differently!
| Feature | Layout | Template |
|---|---|---|
| Keeps state | ✅ Yes | ❌ No |
| Re-renders | ❌ No | ✅ Yes |
| File name | layout.js |
template.js |
What Does This Mean?
Layout = Lazy friend 🛋️
- Stays put when you navigate
- Doesn’t rebuild itself
- Keeps remembering things
Template = Energetic friend 🏃
- Fresh start every time!
- Rebuilds on each navigation
- Forgets everything
When to Use Each?
graph TD A["Need state to persist?"] A -->|Yes| B["Use Layout"] A -->|No| C["Need fresh start?"] C -->|Yes| D["Use Template"] C -->|No| B
📄 template.js File
Creating a Template
Same structure as layout, different behavior!
// app/dashboard/template.js
export default function Template({ children }) {
return (
<div>
<p>I re-render every navigation!</p>
{children}
</div>
);
}
Real Use Case
Animation on every page visit:
// app/template.js
export default function Template({ children }) {
return (
<div className="fade-in">
{children}
</div>
);
}
Every time you navigate, the fade-in animation plays again! 🎬
🎨 CSS Modules Support
Scoped Styles (No Conflicts!)
CSS Modules = styles that only work in one file. Like having your own private paint bucket!
How To Use
Step 1: Create a file ending in .module.css
/* layout.module.css */
.container {
display: flex;
gap: 20px;
}
.sidebar {
width: 200px;
background: #f0f0f0;
}
Step 2: Import and use it
// layout.js
import styles from './layout.module.css';
export default function Layout({ children }) {
return (
<div className={styles.container}>
<aside className={styles.sidebar}>
Menu
</aside>
<main>{children}</main>
</div>
);
}
Why CSS Modules Rock
| Problem | CSS Modules Fix |
|---|---|
| Name clashes | ✅ Each file is isolated |
| Global mess | ✅ Styles stay local |
| Confusion | ✅ Clear ownership |
🌍 Global CSS Imports
Styles That Work Everywhere
Sometimes you WANT styles to apply to everything. That’s Global CSS!
How To Use
Step 1: Create a global CSS file
/* app/globals.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
a {
color: blue;
}
Step 2: Import it in Root Layout
// app/layout.js
import './globals.css';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
Important Rule! ⚠️
Global CSS can ONLY be imported in the Root Layout or inside CSS Modules!
graph TD A["Global CSS"] --> B["Import in Root Layout"] B --> C["Works everywhere!"]
🎯 Quick Summary
| Concept | One-Liner |
|---|---|
| Layout | Wrapper that stays put |
| Root Layout | The main wrapper with html/body |
| Nested Layouts | Layouts inside layouts |
| Layout Props | Just children! |
| Templates | Fresh wrapper every time |
| CSS Modules | Private styles per file |
| Global CSS | Styles for everyone |
🚀 You Did It!
Now you understand how Next.js organizes pages like a pro!
Remember the house analogy:
- 🏠 Root Layout = Foundation
- 🚪 Nested Layouts = Rooms
- 🖼️ Templates = Repainting walls each visit
- 🎨 CSS = Making it all pretty!
Go build something amazing! 🎉