Next.js Image AWS S3 정적 파일 배포 이후 이미지 안나오는 현상

S3 배포 이후 이미지가 안나오는 이슈 발생

NextJs에서 제공 해 주는 Image컴포넌트에서 자체적으로 src경로가 변경 되기 때문에 loader함수가 필요하다.

next.config.ts

import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin";
import type { NextConfig } from "next";
const withVanillaExtract = createVanillaExtractPlugin();

const nextConfig: NextConfig = {
  webpack: (config) => {
    config.module.rules.forEach((rule: any) => {
      if (rule.test && rule.test.toString().includes("svg")) {
        rule.exclude = /\.svg$/;
      }
    });
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  },
  output: "export",
  images: {
    loader: "custom",
    loaderFile: "./image-loader.ts", // 여기서 전역 loader 설정
  },
  assetPrefix: "",  //s3 도메인으로 수정
};

module.exports = withVanillaExtract(nextConfig);

image-loader.ts

interface ImageLoaderProps {
  src: string;
  width: number;
  quality?: number;
}

export default function imageLoader({ src, width, quality }: ImageLoaderProps) {
  return `${src}?w=${width}&q=${quality || 75}`;
}

이런식으로 next.config에 image loader관련 로직을 추가하고, image-loader.ts파일 추가 해 주면 된다.