Next.js 기초 <13. Next.js 15에서 이미지 최적화 (next/image, Dynamic Image Processing)>

넥스트 Next.js

13. Next.js 15에서 이미지 최적화 (next/image, Dynamic Image Processing) 

 

안녕하세요! 태마입니다.

Next.js 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

넥스트 Next.js

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. Next.js 15에서 이미지 최적화가 중요한 이유

이미지는 웹사이트에서 가장 많은 용량을 차지하는 요소 중 하나이다.
Next.js 15에서는 next/image 컴포넌트를 활용하여 자동으로 최적화된 이미지를 제공할 수 있다.

📌 Next.js 15에서 이미지 최적화의 장점
✔ 자동 이미지 최적화 → 브라우저에 맞춰 이미지 크기 및 포맷(WebP) 최적화
✔ Lazy Loading 기본 지원 → 필요할 때만 이미지를 로드하여 성능 향상
✔ 반응형 이미지 제공 → 다양한 화면 크기에 맞는 이미지 자동 생성
✔ CDN을 통한 빠른 로딩 속도 → Vercel에서 제공하는 이미지 최적화 기능 활용 가능

✅ 이미지 처리 방식 비교

방식설명장점단점

next/image 사용	Next.js 기본 이미지 최적화	✅ 성능 최적화, Lazy Loading 지원	❌ 외부 이미지 도메인 허용 필요
HTML <img> 사용	기본적인 이미지 태그	✅ 간단한 사용법	❌ 성능 최적화 기능 없음
Cloudinary, Imgix 활용	외부 이미지 최적화 서비스	✅ 강력한 이미지 처리 기능	❌ API 비용 발생 가능

📌 Next.js 15에서는 next/image 사용을 권장하며, 외부 이미지 서비스와 함께 활용 가능!

---

2. Next.js 15에서 next/image 적용하기

✅ 1) next/image를 사용한 기본 이미지 최적화 (app/components/ImageExample.tsx)

import Image from "next/image";

export default function ImageExample() {
  return (
    <div>
      <h2>📸 Next.js 15 이미지 최적화</h2>
      <Image src="/images/example.jpg" alt="Example" width={800} height={600} priority />
    </div>
  );
}

📌 next/image를 사용하면 자동으로 최적화된 이미지가 제공됨!

✅ 2) 외부 이미지 사용을 위한 next.config.js 설정 (next.config.js)

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ["example.com", "cdn.example.com"],
  },
};

module.exports = nextConfig;

📌 외부 도메인의 이미지를 사용하려면 next.config.js에서 images.domains를 설정해야 함!

✅ 3) 외부 이미지 불러오기 (app/components/ExternalImage.tsx)

import Image from "next/image";

export default function ExternalImage() {
  return (
    <Image src="https://cdn.example.com/image.jpg" alt="External Image" width={500} height={300} />
  );
}

📌 외부 이미지를 가져올 때도 최적화가 적용됨!

✅ 4) 반응형 이미지 (fill 속성 사용) (app/components/ResponsiveImage.tsx)

import Image from "next/image";

export default function ResponsiveImage() {
  return (
    <div style={{ position: "relative", width: "100%", height: "400px" }}>
      <Image src="/images/hero.jpg" alt="Hero" fill sizes="(max-width: 768px) 100vw, 50vw" />
    </div>
  );
}

📌 fill 속성을 사용하면 이미지가 컨테이너 크기에 맞게 자동 조절됨!

✅ 5) Lazy Loading 기본 지원 (app/components/LazyImage.tsx)

import Image from "next/image";

export default function LazyImage() {
  return (
    <Image src="/images/slow-load.jpg" alt="Lazy Load Example" width={600} height={400} loading="lazy" />
  );
}

📌 Lazy Loading이 기본으로 적용되어 성능 최적화 가능!

---

✅ 여기까지 Next.js 15에서 기본적인 next/image 활용법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 Dynamic Image Processing을 적용하려면?"
✅ 2부에서 이미지 변형, 압축, 크기 조절을 동적으로 처리하는 방법을 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. Next.js에서 Dynamic Image Processing이 필요한 이유

Next.js 15에서는 이미지를 동적으로 변형하여 최적화할 수 있는 방법을 제공한다.
이미지 크기, 품질, 포맷(WebP 변환)을 동적으로 조절하여 최적의 성능을 유지할 수 있다.

📌 Dynamic Image Processing 주요 기능
✔ 이미지 크기 조절 → URL 파라미터를 통해 동적 크기 조정 가능
✔ 포맷 변환 (WebP, AVIF 지원) → 더 작은 용량으로 변환하여 빠른 로딩 가능
✔ 품질 조절 (Quality 조정) → 이미지 품질을 조절하여 최적화 가능

---

2. Next.js API Routes를 활용한 Dynamic Image Processing 구현

✅ 1) Sharp 라이브러리 설치 (이미지 변형을 위한 라이브러리)

$ npm install sharp

📌 sharp을 사용하면 Next.js API Routes에서 이미지를 동적으로 변형 가능!

✅ 2) Dynamic Image API 구현 (app/api/image/route.ts)

import { NextResponse } from "next/server";
import sharp from "sharp";

export async function GET(req: Request) {
  const url = new URL(req.url);
  const width = Number(url.searchParams.get("width")) || 500;
  const height = Number(url.searchParams.get("height")) || 500;
  const format = url.searchParams.get("format") || "webp";

  const imageBuffer = await fetch("https://cdn.example.com/image.jpg").then((res) => res.arrayBuffer());

  const processedImage = await sharp(Buffer.from(imageBuffer))
    .resize(width, height)
    .toFormat(format as any)
    .toBuffer();

  return new NextResponse(processedImage, {
    headers: { "Content-Type": `image/${format}` },
  });
}

📌 API에서 이미지 크기, 포맷을 조절하여 변형된 이미지를 반환!

✅ 3) 클라이언트에서 Dynamic Image 사용 (app/components/DynamicImage.tsx)

import Image from "next/image";

export default function DynamicImage() {
  return (
    <Image src="/api/image?width=300&height=200&format=webp" alt="Dynamic Image" width={300} height={200} />
  );
}

📌 API 요청을 통해 동적으로 변형된 이미지를 가져올 수 있음!

✅ 4) Next.js에서 Cloudinary, Imgix 같은 외부 이미지 서비스 활용
Next.js에서는 Cloudinary, Imgix 같은 외부 이미지 서비스도 활용할 수 있다.

<Image src="https://res.cloudinary.com/demo/image/upload/w_500,h_300/sample.jpg" width={500} height={300} />

 

📌 Cloudinary, Imgix 같은 서비스는 더욱 강력한 이미지 변형 기능을 제공!

---

✅ 여기까지 Next.js 15에서 Dynamic Image Processing을 적용하는 방법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 애니메이션과 인터랙션은 어떻게 적용할까?"
✅ 다음 회차에서 Next.js 15에서 애니메이션과 인터랙션을 구현하는 방법을 배워봅시다!