Next.js - CSS modules & SASS

CSS-in-JS Styled component in Next.js!

Next.js -> use hermetic css style in component:

Benefits:

WORKS WITH SERVER SIDE COMPONENTS!
ADDS UNIQUE ID TO CLASSNAME ON PRODUCTION, SO IN PROJECT FOR DIFFERENT PAGES WE CAN HAVE THE SAME NAME OF CLASS, AND IT WILL NOT OVERWRITE!
WHEN SITE IS LOADING, ONLY NECESSARY FOR SPECIFIC PAGE STYLES ARE LOADED (RESULT: FASTER SITE!)

create file CSS Module, f.e.. Button.module.css

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: darkblue;
}

Create component Button.js

import React from 'react';
import styles from './Button.module.css';

const Button = ({ children }) => {
  return (
    <button className={styles.button}>
      {children}
    </button>
  );
};

export default Button;

Use “Button” component in app:

import React from 'react';
import Button from '../components/Button';

const Home = () => {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <Button>Click Me</Button>
    </div>
  );
};

export default Home;

SASS:

first install in project:

npm install sass

Then just create file .scss next to file of page or component (for style specific for one component): f.e.

.text {
    &.revert{
        background-color: black;
        color:white;
        padding: 10px;
        border-radius: 3px;
    }
    p {
        margin-bottom: 10px;
        text-align: justify;

        &:last-child {
            margin-bottom: 10px;
        }
    }
}

Use it in component AboutUs:

import style from "./aboutUs.module.scss"

// use one specific style
<section className={style.text}>

// use two styles at the same time
<section  className={`${style.text} ${style.revert}`}>

or use Global styles: Create Directory “styles” in src/ create file “global.scss”

@font-face {
    font-family:  "Oswald"
    src: url(./Oswald/Oswald-VariableFont_wght.ttf) format("truetype");
}

* {
    box-sizing: border-box;
    padding:0;
    margin:0
}

html, body {
    font-family: Roboto, segoe ui,Helvetica, Arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;
    color: rgb(53, 53, 53);
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
}

h1 {
    font-size: 2.5rem;
    margin-top: 20px;
    margin-bottom: 10px;
}

h2 {
    font-size: 2rem;
    margin-top: 20px;
    margin-bottom: 10px;
}

h3 {
    font-size: 1.5rem;
    margin-top: 20px;
    margin-bottom: 10px;
}

.main-container {
    margin: 30px 5vw;
}

Use global style in project:

It’s enough to import in top level layout.tsx and wrap around {children} so they all will have this style:

import {FC} from "react";
import { Menu } from "@/common/components/Menu"
import "../styles/global.scss"

type RootLayoutProps = {
  children: React.ReactNode;
};
export const metadata = {
  title: 'Layout next.js',
  description: 'Generated by Next.js',
}

const RootLayout: FC<RootLayoutProps> = ({children}) =>{
  return (
    <html lang="en">
      <body>
        <Menu/>
        <main className="main-container">
        {children}</main>
      </body>
    </html>
  );
}

export default RootLayout

Summary:

Use separate files “somepage.module.scss” in each page directory, if style for one specific page is needed
Use global file “global.scss: in directory “styles” and wrap around {children} in top level layout.tsx, if all pages needs the same styles

*INFO: This post is my notes based on Udemy course (“Nextjs 14 od podstaw”) by Jarosław Juszkiewicz

Next.js - CSS modules & SASS

Categories

Tags

CSS-in-JS Styled component in Next.js!