Next.jsでPWA対応

はじめに

こんにちは、エンジニアのkeitaMaxです。

Next.jsでPWA対応してみようと思います。

install

以下コマンドでpwa対応できるライブラリをインストールします。

npm install next-pwa

manifestの作成

このサイトで作れるっぽいです。

{
  "name": "ケイタMAXの冒険",
  "short_name": "ケイタMAXの冒険",
  "description": "ケイタMAXの忘れた記憶を取り戻す冒険物語",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#2EC6FE",
  "theme_color": "#8936FF",
  "orientation": "any",
  "dir": "auto",
  "lang": "ja",
  "icons": [
    {
      "src": "/icon512_maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icon512_rounded.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

こんな感じになりました。

これをpublicフォルダ配下におきます。

next.config.jsの修正

以下のように修正しました

next.config.js

/** @type {import('next').NextConfig} */
const nextPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
})

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  output: 'export',
  basePath: process.env.NODE_ENV === 'production' ? '/my-site' : '',
  images: {
    unoptimized: true,
  },
}

module.exports = nextPWA(nextConfig)

起動して確認

以下コマンドで起動します。

npm run dev

localhost:3000にアクセスして、ブラウザ以下のようなマークが出てくれば成功です！

このボタンを押すとアプリがインストールされます！

おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

参考