밝을희 클태

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

KEYNUT 프로젝트

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

huipark 2024. 8. 19. 21:26

 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

PWA for Next.js, powered by Workbox.. Latest version: 10.2.8, last published: a month ago. Start using @ducanh2912/next-pwa in your project by running `npm i @ducanh2912/next-pwa`. There are 5 other projects in the npm registry using @ducanh2912/next-pwa.

www.npmjs.com

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

// 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);
저작자표시 비영리 변경금지

'KEYNUT 프로젝트' 카테고리의 다른 글

내가 설정한 description이 안 나온다.  (0) 2024.08.28
[ React ] Custom Confirm Modal 만들기  (0) 2024.08.24
[ AWS ] CloudFront를 활용해 S3 GET요청 최적화  (0) 2024.08.18
[ Next.JS ] 이미지 슬라이더(image-slider) UX 개선  (0) 2024.08.18
[ JS ] iPad safari에서 모바일 체크하기  (0) 2024.08.07
'KEYNUT 프로젝트' Related Articles more