Documentation Next.js

Next.jsでPWAを実装する手順

Next.jsを使ってPWA（Progressive Web App）を構築することで、Webアプリケーションがオフラインでも動作し、ユーザーのデバイスにインストール可能なアプリのような体験を提供できます。ここでは、PWAをNext.jsで実装する際の基本手順と注意点を紹介します。

next-pwaパッケージのインストール

Next.jsでPWA対応を簡単に行うためには、next-pwaというパッケージを利用します。これにより、Service Workerの設定やキャッシュ管理が自動化され、開発者の手間を大幅に軽減します。 まずは、next-pwaをインストールします。

npm install next-pwa

next.config.jsの設定

インストール後、Next.jsの設定ファイルであるnext.config.jsにnext-pwaを設定します。開発中はService Workerの生成を無効にしておくことが一般的です。

const withPWA = require('next-pwa');
module.exports = withPWA({
  pwa: {
    dest: 'public',
    disable: process.env.NODE_ENV === 'development',
  },
});

この設定により、プロダクション環境ではPWA機能が有効になり、Service Workerが自動的に生成されます。

manifest.jsonの作成

PWAでは、アプリの設定を定義するmanifest.jsonファイルが必要です。このファイルをpublicディレクトリに作成し、アプリ名やアイコン、テーマカラーなどを指定します。

{
  "name": "My Awesome App",
  "short_name": "MyApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

このファイルは、アプリがインストールされる際の動作や表示を制御します。

オフラインページの設定

オフライン時に表示される専用のページを作成することも重要です。pages/_offline.jsとして以下のような簡単なオフライン用ページを作成します。

const OfflinePage = () => {
  return <div>オフラインです。接続を確認してください。</div>;
};
export default OfflinePage;

このページは、next-pwaが自動的にキャッシュし、ユーザーがオフラインの際に表示されます。

PWAの確認

すべての設定が完了したら、開発サーバーを起動し、LighthouseなどのツールでPWAとして正しく動作しているか確認します。PWAが正しく設定されていれば、インストールボタンが表示され、オフライン時の動作も確認できます。

npm run dev

まとめ

Next.jsでPWAを実装することで、オフライン対応やインストール可能なWebアプリを容易に作成できます。next-pwaを使えば、PWAの複雑な設定も簡単に行え、少ない労力で高機能なアプリを提供できる点が魅力です。また、オフライン時のユーザー体験向上のため、専用のページを準備することも効果的です。

参照:

`Next.js` で作成した Web アプリを PWA 対応する
円