nextjs製のアプリをPWAする簡単な方法
前提条件
- nextjs製のアプリができていること
- アプリケーション名、アイコン(512x512を推奨)があること
手順
1. next-pwaのインストール
1# npmの場合
2npm install next-pwa
3
4# yarnの場合
5
6yarn add next-pwa
7
8# pnpmの場合
9
10pnpm add next-pwa
112. next.config.jsの作成
1const withPWA = require("next-pwa")({
2 dest: "public",
3});
4
5module.exports = withPWA({
6 // github pagesなどの場合は以下の一行を追加
7 //output: "export",
8});3.manifest.jsonをpublicフォルダー内に作成する
1{
2 "name": "webアプリの名前",
3 "icons": [
4 {
5 "src": "アイコンのパス",
6 "sizes": "アイコンのサイズ(例:512x512)",
7 "type": "(画像のタイプ(pngはimage/png))",
8 "purpose": "maskable any"
9 }
10 ]
11}4.layout.tsxに以下を追加
1export const metadata: Metadata = {
2 manifest: "./manifest.json",
3};5. gitignoreに以下を追加
1# PWA files
2**/public/sw.js
3**/public/workbox-*.js
4**/public/worker-*.js
5**/public/sw.js.map
6**/public/workbox-*.js.map
7**/public/worker-*.js.map6. プレビューの起動
これでPWA化が完了します。