Next.jsを使うことでPWAの対応も簡単にできるようになります、よりよいUXのためにPWAを採用するのは選択肢としてとても効果的ですね。今回はここまでの記事で作成したヘッドレスCMSのサイトにPWAの機能を実装していくまでをまとめてみたいと思います。また、記事の最後にはビルド時に発生するエラーの対処法や注意点なども備忘録として残しています。   （過去の参考記事もどうぞ） Next.jsとWordPressでヘッドレスCMSのサイトを作成する＃5：アナリティクス・アドセンスの導入とサイトマップ作成 Next.jsとWordPressでヘッドレスCMSのサイトを作成する＃4：静的・動的ルーティングとページ作成 Next.jsとWordPressでヘッドレスCMSのサイトを作成する＃3：メタ情報設定・ファイル最適化・ステート管理 Next.jsとWordPressでヘッドレスCMSのサイトを作成する＃2：コーディング環境の構築 Next.jsとWordPressでヘッドレスCMSのサイトを作成する＃1：インストール・導入    

1. PWAの対応

Next.jsでPWAの対応を進めていく場合には、専用のモジュールが提供されていますので、それを利用していきます。必要なモジュールをインストールしていきます。

npm install next-pwa

  インストールしたら、Next.jsの設定ファイルを下記のように要件にあわせて編集していきます。キャッシュ管理をすることで、オフラインでもサイトを閲覧することができるようになるのもメリットですね。 【/next.config.js】

const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
  disable: process.env.NODE_ENV === 'development',
  runtimeCaching: [
    {
      urlPattern: /^https:\/\/example.com\/.*/,
      handler: 'NetworkFirst',
      options: {
        cacheName: 'api-cache',
        expiration: {
          maxEntries: 10,
          maxAgeSeconds: 24 * 60 * 60,
        },
        networkTimeoutSeconds: 10,
      },
    },
    {
      urlPattern: /\.(png|jpg|jpeg|svg|gif|webp)$/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'image-cache',
        expiration: {
          maxEntries: 50,
          maxAgeSeconds: 30 * 24 * 60 * 60,
        },
      },
    },
    {
      urlPattern: /\.(woff|woff2|ttf|eot)$/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'font-cache',
        expiration: {
          maxEntries: 10,
          maxAgeSeconds: 60 * 24 * 60 * 60,
        },
      },
    },
    {
      urlPattern: /\.(css|js)$/,
      handler: 'StaleWhileRevalidate',
      options: {
        cacheName: 'static-resources',
        expiration: {
          maxEntries: 30,
          maxAgeSeconds: 7 * 24 * 60 * 60,
        },
      },
    },
  ],
  fallbacks: {
    document: '/offline.html'
  }
});
const nextConfig = withPWA({
  output: 'export',
  trailingSlash: true,
  images: {
    unoptimized: true
  }
});
module.exports = nextConfig;

  続いて、manifest.jsonにアプリの情報を追記していきます。publicディレクトリ配下にファイルを作成し、今回は下記のように設定してみます。

┣ /public
  ┣ manifest.json
  ┣ icon-192x192.png
  ┣ icon-256x256.png
  ┣ icon-384x384.png
  ┣ icon-512x512.png
  ┣ .....

  アイコンなど必要なアセットファイルは各サイズあらかじめ用意しておきましょう。特にAndroidではアイコンが円形にマスクされるものもあるので、その辺りも踏まえて作成します。 【/public/manifest.json】

{
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "orientation": "any",
  "display": "standalone",
  "scope": "/",
  "start_url": "https://example.com/",
  "name": "Sample APP PWA",
  "short_name": "Sample APP",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable",
      "background_color": "#ffffff"
    },
    {
      "src": "/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png",
      "purpose": "maskable",
      "background_color": "#ffffff"
    },
    {
      "src": "/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable",
      "background_color": "#ffffff"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable",
      "background_color": "#ffffff"
    }
  ],
  "screenshots": [
    {
      "src": "/splashscreens_iphone_splash.png",
      "type": "image/png",
      "sizes": "1242x2688",
      "form_factor": "narrow"
    },
    {
      "src": "/splashscreens_ipad_splash.png",
      "type": "image/png",
      "sizes": "2048x2732",
      "form_factor": "wide"
    }
  ]
}

  iOSの場合、デバイスごとに解像度とビューポートサイズに合わせたスプラッシュスクリーン画像を用意する必要があります。ジェネレーターを使うことで一括で生成できるのでおすすめです。 https://progressier.com/pwa-icons-and-ios-splash-screen-generator   スプラッシュスクリーンが用意できたら、各画像をmetaタグで設定する必要があるので、下記のようにheadの設定を行なっていきます。 【/src/features/common/siteMeta.ts】

import type { Metadata } from 'next';

export const iosSplashScreens = [
  {
    rel: 'apple-touch-startup-image',
    media: 'screen and (device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)',
    url: '/assets/splashscreens/ios/iPhone_16_Pro_Max_landscape.png'
  },
  ...
];

export const SiteMeta: Metadata = {
  ....
  appleWebApp: {
    capable: true,
    title: 'Sample APP',
    statusBarStyle: 'black-translucent',
    startupImage: iosSplashScreens
  },
  ....
};

  これでNext.jsのサイトがPWAに対応しました、ブラウザからアプリとしてインストールできるようになります。    

2. SSGビルドのエラー対処など

Error: Static page generation for **** is still timing out after * attempts. API経由で動的ページのコンテンツを取得しながらビルドしていると、サーバーの状況によってはエラーが出る場合もあります。そんな場合には下記のようにタイムアウトの時間を調整します。 【next.config.js】

module.exports = {
  ....
  staticPageGenerationTimeout: 1000,
}

  ⚠Entire page **** deopted into client-side rendering. useSearchParamsフックを使っているコンポーネントを含むページでレンダリングが失敗することがあります。その場合には下記のように、該当するコンポーネントを「Suspense」でラップしてあげるようにします。

import { useSearchParams } from 'next/navigation';
const App = () => {
  const searchParams = useSearchParams();
  .....
}

【/src/app/page.tsx】
import { Suspense } from 'react';

export default function FrontPage {
  return (
    <main>
      <Suspense fallback={<></>}>
        <App />
      </Suspense>
    </main>
  );
}

  末尾がスラッシュのURLでビルド デフォルトではPAGENAME.htmlとルーティング名のHTMLファイルとしてビルドされるため、最読み込みをすると404エラーとなってしまいます。Next.jsのconfigで trailingSlash: true に設定することで末尾がスラッシュのURLとなり、それぞれルーティングに合わせたディレクトリとindex.htmlで生成されます。

const nextConfig = withPWA({
  output: 'export',
  trailingSlash: true,
  ....
});

 

---

  6回の記事にわたってNext.jsでヘッドレスCMSのサイトを作成する方法についてまとめてきました。近年ではヘッドレスCMSを使った運用を検討されるケースも増えてきている印象で、Next.jsを採用するのは1つの選択肢として候補に上がると思いますので、扱えるようにしておきたいですね。   （過去の参考記事もどうぞ） Next.jsとWordPressでヘッドレスCMSのサイトを作成する＃5：アナリティクス・アドセンスの導入とサイトマップ作成 Next.jsとWordPressでヘッドレスCMSのサイトを作成する＃4：静的・動的ルーティングとページ作成 Next.jsとWordPressでヘッドレスCMSのサイトを作成する＃3：メタ情報設定・ファイル最適化・ステート管理 Next.jsとWordPressでヘッドレスCMSのサイトを作成する＃2：コーディング環境の構築 Next.jsとWordPressでヘッドレスCMSのサイトを作成する＃1：インストール・導入