How to Use Layouts and Components in Next.js (Beginner-Friendly Guide)
If you’re starting with Next.js, one of the most important concepts to understand is how to use layouts and components. These two features help you build clean, reusable, and scalable websites—without repeating code.
In this guide, you will learn what layouts and components are, why they matter, and how to use them step by step.
What Are the Components in Next.js?
Components are the building blocks of your UI. They allow you to create small, reusable pieces—such as:
- Buttons
- Headers
- Footers
- Cards
- Navigation bars
Instead of writing the same code repeatedly, components help you write once and reuse anywhere.
Example of a Simple Component
// components/Button.js
export default function Button({ text }) {
return <button className=”px-4 py-2 bg-blue-600 text-white”>{text}</button>;
}
Using a Component in a Page
// app/page.js
import Button from “../components/Button”;
export default function Home() {
return (
<div>
<h1>Welcome to Next.js</h1>
<Button text=”Click Me” />
</div>
);
}
This is the perfect example of how to use layouts and components in Next.js to keep your code clean.
What Are Layouts in Next.js?
Layouts allow you to create a wrapper around your pages.
For example, your website normally has:
- Header
- Footer
- Sidebar
Instead of adding these in to every page, Next.js layouts let you wrap all pages with a single template.
How Layouts Work in the Next.js App Router
In the app/ directory, you can create a layout.js file:
Example Layout
// app/layout.js
export default function RootLayout({ children }) {
return (
<html lang=”en”>
<body>
<header>
<h1>My Website</h1>
</header>
<main>{children}</main>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>
</html>
);
}
Now, every page inside the app/ directory automatically uses this layout.
Using Nested Layouts
You can even create specific layouts for different sections.
Example:
app/dashboard/layout.js
app/dashboard/page.js
This makes your project highly maintainable.
Why Layouts and Components Matter in Next.js
Using layouts and components allows you to:
- Reduce code repetition
- Improve code organization
- Build scalable UI
- Maintain consistent design
- Simplify project structure
That’s why learning how to use layouts and components in Next.js is essential for any developer.
Conclusion
Layouts and components are core concepts of Next.js that help you build reusable, modular, and maintainable applications. Once you understand how to use layouts and components in Next.js, building professional websites becomes much easier.