next/image

~22 min · next/image, optimization, CLS

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

Component 가 사주는 것

가 를 wrap: format 변환 (WebP/AVIF), responsive size, lazy loading, blur-up placeholder, reserved space (Cumulative Layout Shift 없음). Optimizer 가 Vercel 에선 edge 에 돌고; self-host 에선 sharp 가 take over.

Local vs remote image

Local image (import) 가 dimension 자동 detect. Remote image 는 layout reserve 위해 명시적 width 와 height 필요; host 가 images.remotePatterns 에 있어야.

v16: `preload`, `priority` 아님

Above-the-fold hint 가 priority 에서 preload 로 rename. 옛 코드 여전히 작동하지만 deprecation warning log.

Unknown size 위한 fill mode

fill 이 parent container 까지 stretch; Tailwind/CSS 통한 object-fit 와 responsive serving 위한 sizes hint 와 짝지어.

Code

Local image, auto-sized·tsx

import Image from 'next/image';
import hero from '@/public/hero.jpg';

export function Hero() {
  return (
    <Image
      src={hero}
      alt="Hero"
      placeholder="blur"
      preload  // v16 — 'priority' 대체
    />
  );
}

명시적 dimension 의 remote image·tsx

// next.config.ts
import type { NextConfig } from 'next';
const config: NextConfig = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'images.example.com', pathname: '/**' },
    ],
    formats: ['image/avif', 'image/webp'],
  },
};
export default config;

// Component 안:
<Image src={user.avatarUrl} alt={user.name} width={48} height={48} className="rounded-full" />

Responsive background 위한 fill + object-fit·tsx

<div className="relative h-64 w-full">
  <Image
    src="/background.jpg"
    alt=""
    fill
    sizes="100vw"
    className="object-cover"
  />
</div>

External links

next/image

Exercise

Project 의 모든 plain <img> 를 <Image> 로 교체. Remote image 위해 remotePatterns 에 host register. Lighthouse CLS score 가 0 으로 떨어지는지 확인.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousCSS-in-JS 한계 Next →next/font

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.