Next를 Next 답게 사용하는 방법

✔️ Image 컴포넌트 사용

• lazy loading : 이미지 로드하는 시점을 지연시키는 기능을 제공한다. 따라서 스크린 밖에 있는 이미지들은 로딩을 지연시키고 스크린 안에 있는 이미지만을 로드해 불필요한 대역폭 사용을 줄이고 필요한 이미지만 빠르게 로드할 수 있도록 최적화 할 수 있다. (우선적으로 로딩 시키고 싶다면 priority 속성을 추가하면 된다!)

• 이미지 사이즈 최적화

  • 사용자의 디바이스에 맞는 이미지 사이즈를 만들어 다운로드 할 수 있게 제공
  • webp와 같은 용량이 작은 포맷으로 변환하여 제공(이미지에 대한 최초 요청 시에 Next.js 서버에서 진행)
  • 이후 요청에는 캐시가 만료될 때까지 캐시 된 이미지가 제공되기 때문에 첫 번째 요청보다 훨씬 빠르게 이미지를 보여줄 수 있게 된다.

• placeholder 제공 : 레이아웃이 흔들리는 현상을 방지하기 위해 placeholder를 제공 해 이미지가 로드되기 전에도 이미지 높이만큼 영역을 표시해서 이미지가 로드된 후에 레이아웃이 흔들리지 않도록 할 수 있다.

import logoImg from '@/assets/logo.png'

export default function Header() {
    return(
        <header className={classes.header}>
           <img src={logoImg.src} alt="logoImg" />

				▽ ▽ ▽ ▽ ▽ ▽ ▽

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

export default function Header() {
    return(
        <header className={classes.header}>
            <Image src={logoImg} alt="logo image" width={80} height={100} priority />

Network/Headers/Content-Type에서 확인 가능

💡

• 참고