next.config.js

/** @type {import('next').NextConfig} */

const prod = process.env.NODE_ENV === 'production'
const withPWA = require('@ducanh2912/next-pwa').default({
  dest: 'public',
  register: true,
  skipWaiting: true,
  // disable: prod ? false : true, // 나중에 true로 바꿔야함
  disable: false,
  // runtimeCaching,
})

const WorkboxPlugin = require('workbox-webpack-plugin')

const nextConfig = withPWA({
  reactStrictMode: false,
  compiler: {
    styledComponents: true,
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  images: {
    formats: ['image/avif', 'image/webp'],
    domains: [
      'picsum.photos',
      'source.unsplash.com',
      'lh3.googleusercontent.com',
      'lh3.google.com',
      'kr1-api-object-storage.nhncloudservice.com',
    ],
  },
  // plugins: [
  //   new WorkboxPlugin.GenerateSW({
  //     clientsClaim: true,
  //     skipWaiting: true,
  //   }),
  // ],
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    })

    return config
  },
})

const runtimeCaching = {
  plugins: [
    new WorkboxPlugin.GenerateSW({
      clientsClaim: true,
      skipWaiting: true,
    }),
  ],
}

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: true,
})

module.exports = nextConfig

// Next.js에서는 'next.config.js' 파일의 'images' 속성을 구성하여 이미지에 허용되는 도메인을 지정해야 합니다. 이는 승인되지 않거나 잠재적으로 안전하지 않은 외부 이미지 소스가 기본적으로 로드되는 것을 방지하는 보안 기능입니다.

// '이미지' 구성을 사용하면 CORS(교차 원본 리소스 공유)와 관련된 보안 오류를 유발하지 않고 이미지를 로드할 수 있는 도메인을 지정할 수 있습니다. 기본적으로 Next.js는 보안상의 이유로 외부 도메인에서 이미지 로드를 제한합니다.

// 특별한 경우에는 picsum.photos의 이미지를 사용하고 싶으므로 domains 배열에 picsum.photos'를 포함시킵니다. 이를 구성하면 Next.js는 picsum.photos의 이미지를 문제 없이 로드할 수 있습니다.

// 이 구성은 잠재적인 보안 취약성으로부터 애플리케이션을 보호하는 데 도움이 되고 Next.js 애플리케이션에서 이미지를 제공하는 데 사용할 수 있는 도메인을 제어할 수 있도록 하기 때문에 필요합니다. 보안 문제와 예상치 못한 동작을 방지하기 위해 리소스를 로드할 것으로 예상되는 도메인을 지정하는 것이 웹 개발의 모범 사례입니다.

// 따라서 요약하자면 next.config.js에서 images 속성을 구성하는 것은 Next.js 애플리케이션에서 어떤 이미지 도메인을 신뢰할 수 있고 허용하는지 명시적으로 지정하는 방법입니다.