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 기능과 이미지 최적화 설정이 모두 정상적으로 작동하게 되었습니다.
'팀프로젝트' 카테고리의 다른 글
Next.js App Router 빌드 에러 해결하기: 페이지 컴포넌트 구조 최적화🌟 (0) | 2024.11.13 |
---|---|
Next.js에 PWA 적용하기 (1) | 2024.10.23 |
집 플래닛 팀프로젝트! (2) | 2024.10.16 |
Git 트러블슈팅: Git 저장소에 실수로 올려버린 키 제거 과정🌟 (0) | 2024.10.15 |
Git 트러블슈팅: rebase 문제 해결과 안전한 Git 사용법🌟 (0) | 2024.10.15 |