[NextJS] CSS Modules, Image 컴포넌트

📚 CSS Modules 사용하기

Next.js에는 .module.css 확장자를 사용하는 CSS 모듈이 내장되어 있다.

이처럼 .module.css 를 확장자로 하는 파일을 추가하면 그 파일로부터 객체를 불러올 수 있고 이는 기본 빌드 프로세스 및 개발 서버에 의해 자동으로 생성되며 해당 파일에서 정의된 모든 css 클래스에 대해 접근할 수 있다.

불러오는 방식은 다음과 같다 classes 혹은 styles 와 같이 아무 이름으로 선택하고 .module.css 경로에서 불러오면 된다. 이제 해당 객체를 사용할 수 있다. css가 필요한 곳에 className을 추가해 불러온 객체로 클래스를 추가하면 css를 입힐 수 있다.

import classes from "./main-header.module.css";

export default function MainHeader() {
  return <header className={classes.header}></header>
}

CSS Modules에 대한 Next.js 공식 문서

📚 Image 컴포넌트

Next.js에 내장된 Image 컴포넌트는 웹 애플리케이션에서 이미지를 효율적으로 로드하고 퍼포먼스를 최적화하기 위한 도구이다 Image 컴포넌트는 기존의 <img> 태그와 비슷하게 사용되지만, 더 많은 기능과 최적화된 로딩 방식을 제공한다.

• 이미지 최적화: 이미지를 자동으로 최적화하여 브라우저에 최적화된 이미지를 제공한다. 이는 성능 향상과 데이터 소모량을 줄인다.
• 레이아웃 지원: 이미지 컴포넌트는 여러 레이아웃을 지원한다. 예를 들어, fill, fixed, intrinsic, responsive 와 같은 레이아웃 옵션을 사용하여 이미지를 유연하게 표시할 수 있다.
• 레이지 로딩 : 이미지 컴포넌트는 기본적으로 레이지 로딩을 지원한다. loading 속성을 lazy 로 설정하면 이미지가 렌더링되는 동안 레이지 로딩이 활성화된다.
• 다양한 포맷 지원: Image 컴포넌트는 JPEG, PNG, WebP, AVIF 등 다양한 이미지 포맷을 지원한다.
• 캐싱 및 프리페치: 이미지를 캐싱하고 프리페치하여 사용자 경험을 향상시킨다. 이미지가 한 번 로드된 후에는 브라우저 캐시에 저장되어 더 빠르게 로드된다.

import logoImg from "@/assets/logo.png";

<img src={logoImg.src} alt="A plate with food on it" />

import Image from "next/image";
import logoImg from "@/assets/logo.png";

<Image src={logoImg} alt="A plate with food on it" priority />

priority : 이미지가 로드되는 우선순위를 지정하는 데 사용된다. 이 속성을 사용하면 이미지가 페이지 로드와 상관없이 먼저 로드되어 사용자에게 중요한 콘텐츠를 빠르게 표시할 수 있다.
fill : 이미지를 부모 요소에 맞게 확장하여 채우는 데 사용된다. 부모 요소에 정확하게 맞추어 이미지를 늘리거나 축소하여 비율을 유지하면서 채우게 된다.

Image 컴포넌트에 대한 Next.js 공식 문서

참고
Next.js & React - 완벽 정복 가이드