🎨 Styling Components in Next.js v15 Using CSS Modules (Step-by-Step)

You’ve built your layout. You’ve created a reusable MainHeader component. But right now... it probably looks a little ugly 😅

Let’s fix that using CSS Modules — a built-in styling method in Next.js v15 that keeps your styles scoped to each component.

---

🧩 Your Styling Options in Next.js

Next.js gives you multiple ways to style your app:

✅ In this project, we'll use CSS Modules so you can focus on learning Next.js — not memorizing Tailwind classes.

---

✅ What Are CSS Modules?

• CSS written in normal CSS syntax

• Filename ends with .module.css

• The styles are scoped only to the component that imports them

• Prevents global style conflicts

Perfect for reusable components like headers, cards, buttons, etc.

---

🛠️ Step-by-Step: Style Your MainHeader Component

🔹 Step 1: Create the CSS Module File

Inside your /components folder (or wherever your header lives), create:

components/
├── main-header.js
├── main-header.module.css  ← ✅ New file

🔹 Step 2: Add Your CSS

Here’s an example of what your main-header.module.css might include:

.header {
  background-color: #333;
  color: white;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: bold;
  text-decoration: none;
  color: white;
}

.nav {
  display: flex;
  gap: 1.5rem;
}

.nav a {
  text-decoration: none;
  color: white;
}

.nav a:hover {
  text-decoration: underline;
}

---

🔹 Step 3: Import and Use the Styles

In your main-header.js file:

'use client';

import Link from 'next/link';
import Image from 'next/image';
import logo from '@/assets/logo.png';
import classes from './main-header.module.css'; // ✅ Importing the CSS module

export default function MainHeader() {
  return (
    <header className={classes.header}>
      <Link href="/" className={classes.logo}>
        <Image src={logo.src} alt="A plate with food" width={50} height={50} />
        <span>Next Level Food</span>
      </Link>

      <nav className={classes.nav}>
        <Link href="/meals">Browse Meals</Link>
        <Link href="/community">Foodies Community</Link>
      </nav>
    </header>
  );
}

---

🎯 Key Benefits of CSS Modules

✅ Bonus: You can even use SCSS modules (.module.scss) if you enable Sass support.

---

🧠 Global vs CSS Module Styling

---

🚀 What’s Next?

Now that your header looks great, you're ready to:

• Style the rest of your components using CSS modules

• Create reusable UI building blocks

• Explore responsive styling (media queries, etc.)

---

📌 Final Thoughts

✅ CSS Modules help you keep styles clean, modular, and bug-free.
✅ They work perfectly in Next.js v15 without any extra setup.
✅ This is a great balance between plain CSS and more advanced frameworks like Tailwind.