Next.js Image 컴포넌트 외부 이미지 로딩 문제 해결하기🌟

1. 문제 발생❓

Next.js 프로젝트에서 Supabase에 저장된 이미지를 Image 컴포넌트를 통해 불러오려고 했으나, 다음과 같은 에러가 발생했습니다.

버그 발생 캡쳐본

 

 

 

 

 

 

< 초기 설정 코드 > 

 

next.config.mjs

import withPWA from "next-pwa";

/** @type {import('next').NextConfig} */
const nextConfig = {
   images: {
     domains: ["슈퍼베이스 도메인"] 
   }
};

export default withPWA({
  dest: "public",
  ...nextConfig
});

 

ClubList.tsx

"use client";

import React, { useEffect, useState } from "react";
import { getOneTimeClub } from "../_api/supabase";
import { OneTimeClubForm } from "../_types/ClubForm";
import Image from "next/image";
// import { Tables } from "@/database.types";

// const OneTimeClub = Tables<"one_time_club">;

const ClubList = () => {
  const [list, setList] = useState<OneTimeClubForm[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const data = await getOneTimeClub();

        console.log("데이터!!!", data);

        setList(data);
      } catch (error) {
        console.error("일회성모임 리스트 가져오는 중 오류가 발생했습니다", error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>일회성 모임 리스트</h1>
      <div>
        {list?.map((club) => (
          <div key={club.one_time_club_id}>
            <div>
              {typeof club.one_time_image === "string" && (
                <Image
                  src={club.one_time_image}
                  alt={club.one_time_club_name}
                  width={86}
                  height={86}
                  className="object-cover"
                />
              )}
            </div>
            <div>상세정보</div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ClubList;

 

 

 

 

 

 

 

 

2. 원인 추론 🔎

• Next.js는 보안상의 이유로 Image 컴포넌트에서 사용할 수 있는 외부 이미지 도메인을 명시적으로 설정해야 합니다.
• Next.js 13버전 이후부터는 domains 설정 대신 remotePatterns를 사용하는 것을 권장합니다.

// 이 방식으로는 계속 오류 발생
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "snijffzocojzjfoiqjyt.supabase.co",
        port: "",
        pathname: "/**"
      }
    ]
  }
};
export default nextConfig;

 

하지만 이 방식으로도 계속 오류가 떴습니다.

 

• next-pwa 플러그인과 Next.js 기본 설정이 제대로 통합되지 않았습니다.
• withPWA는 Next.js의 설정을 감싸서(wrapping) 새로운 설정을 생성하는 고차함수입니다.
• 단순히 nextConfig를 export하면 PWA 설정이 적용되지 않고, 이미지 설정도 제대로 작동하지 않습니다.

 

 

 

 

3. 해결 과정 📋

• PWA 설정과 Next.js 설정을 올바르게 통합했습니다.
• withPWA로 nextConfig를 감싸서 새로운 설정 객체를 생성했습니다.
• 개발 환경에서는 PWA를 비활성화하는 옵션도 추가했습니다.

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "슈퍼베이스 도메인",
        port: "",
        pathname: "/**"
      }
    ]
  }
};

// PWA 설정과 nextConfig를 통합
const buildConfig = withPWA({
  dest: "public",
  mode: "production",
  disable: process.env.NODE_ENV === "development"
})(nextConfig);

export default buildConfig;

 

< 작동 원리 설명 >

• withPWA는 설정을 변환하는 함수를 반환합니다.
• withPWA(pwaConfig)(nextConfig) 형태로 호출하면:
  • 먼저 PWA 설정을 처리하고
  • 그 다음 Next.js 기본 설정을 통합합니다.
• 최종적으로 모든 설정이 올바르게 병합된 새로운 설정 객체가 생성됩니다!

 

 

<주요 포인트>

• Next.js의 플러그인 시스템은 설정을 계층적으로 처리합니다.
• 여러 설정을 통합할 때는 반드시 플러그인의 래퍼 함수를 통해 처리해야 합니다.
• 단순히 설정 객체를 export하는 것만으로는 플러그인 설정이 제대로 적용되지 않습니다.

 

 

 

 

 

 

4. 결과 ❤‍🔥

이러한 방식으로 설정을 통합함으로써 PWA 기능과 이미지 최적화 설정이 모두 정상적으로 작동하게 되었습니다.