(Next.js) PWA 구현

1. next-pwa 라이브러리 설치

먼저, 프로젝트에 next-pwa 라이브러리를 설치합니다:

npm install next-pwa

또한, PWA를 구성하려면 workbox 관련 라이브러리도 설치해야 합니다.

npm install workbox-core workbox-precaching workbox-routing workbox-strategies

2. next.config.js 파일 수정

PWA 설정을 적용하기 위해 next.config.js 파일을 수정합니다:

// next.config.js
const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
});

module.exports = withPWA({
  reactStrictMode: true,
});

3. manifest.json 파일 생성

PWA에서는 앱의 메타데이터를 담고 있는 manifest.json 파일이 필요합니다. 프로젝트의 public 폴더에 manifest.json 파일을 생성합니다:

4. 서비스 워커 파일 생성

PWA에서는 service-worker가 필요합니다. next-pwa가 자동으로 service-worker.js 파일을 생성해 주므로 별도의 파일을 작성할 필요는 없습니다.

5. public 폴더에 아이콘 추가

manifest.json에서 참조하는 아이콘 파일들을 public/icons/ 폴더에 추가해야 합니다. 각 아이콘 파일을 원하는 크기로 생성한 후, 해당 경로에 배치합니다.

예시:

public/icons/icon-192x192.png
public/icons/icon-512x512.png

6. PWA 설치 및 테스트

모든 설정이 완료된 후, 프로젝트를 빌드하고 PWA 기능을 테스트합니다:

npm run build
npm start

그 후, 애플리케이션을 브라우저에서 열고, 브라우저 개발자 도구의 'Application' 탭에서 PWA가 올바르게 설정되었는지 확인할 수 있습니다. PWA가 제대로 설정되었다면, 'Add to Home Screen' 옵션이 표시될 것입니다.