Next.js Image 배포 환경에서 이미지가 깨지는 문제 해결 (Vercel 402 PAYMENT_REQUIRED) ING

[justhighway]

Next.js Image 배포 환경에서 이미지가 깨지는 문제 해결 (Vercel 402 PAYMENT_REQUIRED) ING

402: PAYMENT_REQUIRED
Code: OPTIMIZED_IMAGE_REQUEST_PAYMENT_REQUIRED
ID: icn1::hqdmb-1754363106275-b75718c4262a

import type { NextConfig } from 'next';

const pageExtensions = ['tsx', 'ts', 'jsx', 'js'];

if (
  process.env.NODE_ENV === 'development' ||
  process.env.VERCEL_ENV === 'preview'
) {
  pageExtensions.unshift('dev.tsx');
}

const nextConfig: NextConfig = {
  pageExtensions,
  reactStrictMode: true,
  // 빌드 환경에서 console.log 제거
  compiler: {
    removeConsole: process.env.NODE_ENV === 'production',
  },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'sprint-fe-project.s3.ap-northeast-2.amazonaws.com',
        port: '',
        pathname: '/**',
      },
    ],
    unoptimized: true,
  },
};

export default nextConfig;