Search code examples
javascripthtmlcsswebnext.js

Next.JS using CSS Modules not working as expected in app/about/layout.tsx

I'm learning Next.js and having issues with locally scoped CSS modules.

I have an about directory and inside, I have a layout component and the styles I applied on the layout component is not been applied on the about page.

layout.jsx:

import styles from "./styles.module.css"

export default function AboutLayout({ children }) {
  return (
    <>
      <nav>About NavBar</nav>
      <main className={styles.main}>
        {children}
      </main>
    </>
  )
}

styles.module.css:

.main {
  min-height: 100vh;
  display: grid;
  place-content: center;
  background-color: #333;
}

I have followed the Next js CSS Modules docs but my css styles is not getting applied.

File Structure

File structure

I am using Next js version 13.2.4, Node js version 18.15.0

Solution

  • I have solved this, I would like to explain.

    I had to delete my whole project and start all over, this time with the flag --experimental-app

    npx create-next-app . --experimental-app