[ Next.JS ] PWA 설정하기 feat. Please check your GenerateSW plugin configuration:[WebpackGenerateSW] 'images' property is not expected to be here. Did you mean property 'mode'?

 PWA를 도입할 생각은 없었는데 모바일 환경에서 잘 작동하기도 해서 PWA를 프로젝트에 도입하기로 했다.

역시나 쉽게 되는 건 없다. 에러가 난다.

Please check your GenerateSW plugin configuration: [WebpackGenerateSW] 'images' property is not expected to be here. Did you mean property 'mode'?

 구글링을 해도 비슷한 에러는 많이 나왔는데 내가 난 에러는 없는 것 같았다. 계속 next.config를 만져보고 이것저것 건드려도 안 됐다. 그러다가 npm 사이트에서 pwa 패키지의 최근 업데이트 날짜를 보는데

이게 무슨일!

 지금 내 Next.js가 14.2.5버전이고 한 달 전쯤 나왔으니까 이게 될 리가 없을 거 같다.

 그러다가 찾은게 아래의 패키지다.

 https://www.npmjs.com/package/@ducanh2912/next-pwa

@ducanh2912/next-pwa

 아래와 같이 설정후 빌드하니 너무 잘된다.

// next.config.mjs

import withPWA from '@ducanh2912/next-pwa';

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  images: {
    domains: ['https://image.keynut.co.kr/'],
    deviceSizes: [640, 750, 828, 1080, 1200],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'image.keynut.co.kr',
        port: '',
        pathname: '**',
      },
    ],
  },
};
export default withPWA({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
  register: true,
  skipWaiting: true,
})(nextConfig);