🧱 Building a Shared Header Component in Next.js v15 – Clean Structure + Logo + Navigation
As a former 3D Animator with more than 12 years of experience, I have always been fascinated by the intersection of technology and creativity. That's why I recently shifted my career towards MERN stack development and software engineering, where I have been serving since 2021.
With my background in 3D animation, I bring a unique perspective to software development, combining creativity and technical expertise to build innovative and visually engaging applications. I have a passion for learning and staying up-to-date with the latest technologies and best practices, and I enjoy collaborating with cross-functional teams to solve complex problems and create seamless user experiences.
In my current role as a MERN stack developer, I have been responsible for developing and implementing web applications using MongoDB, Express, React, and Node.js. I have also gained experience in Agile development methodologies, version control with Git, and cloud-based deployment using platforms like Heroku and AWS.
I am committed to delivering high-quality work that meets the needs of both clients and end-users, and I am always seeking new challenges and opportunities to grow both personally and professionally.
Your app is growing — and you don’t want to repeat the same header code on every page, right?
✅ The solution: create a reusable header component
✅ And display it across all pages using your layout.js
In this blog, you’ll learn:
How to create a clean, reusable
MainHeadercomponentHow to structure your components properly
How to use
next/imageand static assets like logosHow to add navigation that works across the app
🧩 Step 1: Create the Component File
First, create a new file for your header. You can name it:
components/main-header.js
📌 Tip: While Next.js lets you put components anywhere, it’s best to keep non-routing components outside the
app/folder for better project structure.
🧠 Step 2: Set Up the MainHeader Component
Here's what your header component might look like:
'use client';
import Link from 'next/link';
import Image from 'next/image';
import logo from '@/assets/logo.png'; // Static image in the assets folder
export default function MainHeader() {
return (
<header>
<Link href="/">
<div style={{ display: 'flex', alignItems: 'center' }}>
<Image src={logo.src} alt="A plate with food" width={50} height={50} />
<span style={{ marginLeft: '8px', fontWeight: 'bold' }}>Next Level Food</span>
</div>
</Link>
<nav>
<ul style={{ display: 'flex', listStyle: 'none', gap: '1rem' }}>
<li>
<Link href="/meals">Browse Meals</Link>
</li>
<li>
<Link href="/community">Foodies Community</Link>
</li>
</ul>
</nav>
</header>
);
}
✅ Link – From next/link for smooth navigation
✅ Image – From next/image for optimized images
✅ logo.png – Can be placed inside assets/ folder at root level
🗃️ Folder Structure Recommendation
my-next-app/
├── app/
│ └── layout.js # Layout wrapper
│ └── page.js # Homepage
├── components/
│ └── main-header.js # Your reusable header
├── assets/
│ └── logo.png # Static image
🧩 Step 3: Add It to Your Root Layout
Now go to:
app/layout.js
And import + use your new MainHeader:
import MainHeader from '@/components/main-header';
export const metadata = {
title: 'Next Level Food',
description: 'A Next.js food app',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<MainHeader />
{children}
</body>
</html>
);
}
✅ Now your header will show up on every page.
✅ Clicking the logo brings you back to the homepage.
✅ Navigation links work thanks to the <Link> component.
🖼️ A Note About Static Images
When using images in Next.js:
You can import them using the special
@/alias (refers to project root)When you
import logo from '@/assets/logo.png', thelogowill be an objectYou must use
logo.srcas thesrcfor<Image />
<Image src={logo.src} alt="Logo" width={50} height={50} />
😅 The Result Might Look Messy at First
If your page looks unstyled — that’s okay! The component works — it just needs CSS styling, which we’ll handle in the next blog.
✅ Logic works
✅ Structure is clean
✅ Shared header is now across all pages
🔚 Final Thoughts
| Concept | What You Learned |
| Shared Layout | Use layout.js to wrap all pages |
| Reusable Header | Create MainHeader in /components |
| Internal Navigation | Use Link from next/link |
| Static Assets | Import images and use Image correctly |
You now have a working header that’s reusable, maintainable, and fully integrated into your layout system!