css 모듈

일반적인 스탠다드 css 코드이지만 자신의 css 파일에 특정한 이름을 지정함으로써 특정 컴포넌트로 스코핑된다. 그리고 이것은 별도의 설치 없이 NextJS에 의해 지원된다.

.module.css로 끝나는 css 파일을 추가하면 그 파일들로부터 객체를 불러올 수 있고 이것은 기본 빌드 프로세스 및 개발 서버에 의해 자동으로 생성되며 해당 파일에서 정의한 모든 css 클래스에 대한 접근을 속성으로 제공한다.

import Link from "next/link";

import logoImg from "@/assets/logo.png";
import S from "./main-header.module.css";

export default function MainHeader() {
  return (
    <header className={S.header}>
      <Link className={S.logo} href="/">
        <img src={logoImg.src} alt="food" />
        NextLevel food
      </Link>
      <nav className={S.navigation}>
        <ul>
          <li>
            <Link href="/meals">Browse Meals</Link>
          </li>
          <li>
            <Link href="/community">Foodies Community</Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}

import S from "./main-header.module.css"; 가 추가되면 이제 이 classes 객체를 사용할 수 있다. 이것은 특정 속성에 접근하는데 쓰인다. 이 main-header.module.css 파일에서 정의된 모든 클래스는 이 import 객체에서 속성으로 사용 가능해진다.

이렇게 하는 이유?

이 스타일들이 이 컴포넌트에만 스코핑되어 있고 이 페이지의 어떤 다른 컴포넌트에도 영향을 미칠 수 없기 때문이다.

NextJS 이미지 컴포넌트

import Link from "next/link";
import Image from "next/image";

import logoImg from "@/assets/logo.png";
import S from "./main-header.module.css";

export default function MainHeader() {
  return (
    <header className={S.header}>
      <Link className={S.logo} href="/">
        <Image src={logoImg} alt="food" priority />
        NextLevel food
      </Link>
      <nav className={S.navigation}>
        <ul>
          <li>
            <Link href="/meals">Browse Meals</Link>
          </li>
          <li>
            <Link href="/community">Foodies Community</Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}

import Image from "next/image";

NextJS에는 내장 이미지 요소가 있고, 이것은 더 최적화된 방법으로 이미지를 출력할 수 있게 도와준다.