Next.js에서 이미지 로드 최적화

기본적으로 내장된 Next.js 이미지 최적화는 images.unoptimized를 false로 명시적으로 설정하거나 맞춤 Image Loader를 사용하지 않는 한 App Hosting에서 사용 중지됩니다.

이미지 처리 Firebase 확장 프로그램으로 Next.js 전역 이미지 로더를 구성하여 App Hosting의 Next.js 앱에서 이미지의 주문형 최적화 및 전송을 사용 설정할 수 있습니다.

기본 요건

  • Firebase 프로젝트와 App Hosting 백엔드가 있습니다.
  • 프로젝트에서 Cloud Storage가 사용 설정되어 있습니다.
  • 프로젝트에서 Cloud Functions for Firebase가 사용 설정되어 있습니다.

확장 프로그램 설치

Firebase Extensions Hub에서 이미지 처리 확장 프로그램으로 이동하여 Firebase Console에 설치를 선택합니다. 화면에 표시된 안내를 따릅니다.

로컬 이미지 최적화 구성 (선택사항)

애플리케이션에서 이 확장 프로그램을 사용하여 최적화하려는 로컬 이미지를 사용하는 경우 확장 프로그램 설치 프로세스 중에 '호스트 이름' 매개변수를 구성해야 합니다.

  1. 확장 프로그램 구성 중: '확장 프로그램 구성' 단계에 도달하면 '호스트 이름' 매개변수를 찾습니다.

  2. 호스트 이름 설정: Firebase App Hosting 백엔드의 기본 도메인을 입력합니다. 이 도메인은 일반적으로 .hosted.app로 끝납니다.

설치가 완료되면 Image Processing API가 Cloud Functions에 함수로 배포됩니다. Firebase 콘솔에서 함수 대시보드로 이동하여 Image Processing API 트리거 URL을 복사합니다.

맞춤 이미지 로더 설정

최적화된 모든 이미지 구성요소에 배포된 Image Processing API를 사용하는 이미지 로더를 만듭니다. 최적화의 일환으로 동일한 Firebase App Hosting 도메인에서 제공되고 Next.js 애플리케이션과 동일한 글로벌 CDN 뒤에 캐시되도록 재작성합니다.

먼저 next.config.js 파일에 다음 필드를 추가합니다.

// @ts-check

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    loader: "custom",
    loaderFile: "./loader.js",
  },
  async rewrites() {
    return [
      {
        source: "/_fah/image/:path*",
        destination:
          "<CLOUD_FUNCTIONS_URL>/:path*",
      },
    ];
  },
}

module.exports = nextConfig;

그런 다음 다음 콘텐츠로 루트 디렉터리에 loader.js 파일을 만듭니다.

"use client"

export default function myImageLoader({ src, width, quality }) {
  if (process.env.NODE_ENV === "development") {
    return src;
  }

  const operations = [
    {
      operation: "input",
      type: "url",
      url: src,
    },
    { operation: "resize", width: width },
    { operation: "output", format: "webp", quality: quality || 75 },
  ];

  const encodedOperations = encodeURIComponent(JSON.stringify(operations));

  return `/_fah/image/process?operations=${encodedOperations}`;
}

이러한 변경사항이 포함된 커밋을 만들고 라이브 브랜치에 푸시합니다. 그런 다음 App Hosting 출시가 완료될 때까지 기다립니다.