NextJS component not applying styles – Blancer.com Tutorials and projects

I am trying to build a NextJS App but my Navigation component is not styled as expected and not errors are displayed.

I have the src/components/navigation.js file with the following code:

import Link from 'next/link';
import styles from '../styles/Navigation.module.css';

const Navigation = () => {
  return (
    <nav className={styles.nav}>
      <Link href="/" className={styles.logo}>
        My App
      </Link>
      <ul className={styles.menu}>
        <li className={styles.menuItem}>
          <Link href="/about">
            About
          </Link>
        </li>
        <li className={styles.menuItem}>
          <Link href="/features">
            Features
          </Link>
        </li>
        <li className={styles.menuItem}>
          <Link href="/faq">
            FAQ
          </Link>
        </li>
        <li className={styles.menuItem}>
          <Link href="/contact">
            Contact
          </Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navigation;

And the src/styles/Navigation.module.css file:

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: #007acc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #161616;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
}

.menu {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menuItem {
    margin-left: 1.5rem;
}

.menuItem a {
    text-decoration: none;
    color: #333;
    transition: color 0.2s;
}

.menuItem a:hover {
    color: #676767;
}

Then I load the Navigation component in the src/pages/_document.js:

import Navigation from '@/components/navigation'
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Navigation />
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

I have tried changing the paths of the styles and the component but the result remains.

The src/pages/index.js page is styled correctly and the styles paths are the same.

As you can see in the image above, there is a global.css file affecting the src/_app.js. But it just loads the Roboto font-family for the body.

So, in conclussion: It seems there is a component and a page that have the exact methodology to load CSS but only the page’s style is being loaded. What’s wrong here?