【Next.js】output: “export”のSSGアプリをPWA化する方法｜どれを使うべき？@serwist/next、@ducanh2912/next-pwa、@next-pwa

// app/manifest.ts
// Next.js の Metadata API を使った PWA マニフェスト生成ファイル。
// /manifest.webmanifest として自動配信される（output: "export" 時は静的ファイルとして生成）。
// アイコンは public/ 直下に配置し、sizes・purpose を正確に指定すること。
// output: "export" を使う場合、このファイルに dynamic = "force-static" の指定が必須。

import { MetadataRoute } from "next";

// output: "export"（静的エクスポート）との互換性確保に必要
export const dynamic = "force-static";

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: 'アプリの正式名称', // カスタム
    short_name: '略称',       // カスタム（ホーム画面用）
    description: 'アプリの詳しい説明文をここに記載します。',  //PCでnameの後ろに表示される。文章の重複注意
    start_url: '/',
    display: 'standalone',
    background_color: '#ffffff', // アプリ起動時の背景色
    theme_color: '#3b82f6',     // ブランドカラー（例：Tailwindのblue-500）
    icons: [
      {
        src: '/icon-192x192.png',
        sizes: '192x192',
        type: 'image/png',
        purpose: 'maskable', // アイコンが綺麗に収まるようになります
      },
      {
        src: '/icon-512x512.png',
        sizes: '512x512',
        type: 'image/png',
        purpose: 'maskable',
      },
      {
        src: '/icon-192x192.png',
        sizes: '192x192',
        type: 'image/png',
        purpose: 'any', // purpose: "any" のアイコンも追加すると、トリミング非対応環境でも綺麗に表示される
      },
    ],
  }
}

npm install @serwist/next

169 packages are looking for funding
  run `npm fund` for details

14 vulnerabilities (8 low, 2 moderate, 4 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

import withSerwistInit from "@serwist/next";

const withSerwist = withSerwistInit({
  swSrc: "app/sw.ts", // サービスワーカーのソースファイル
  swDest: "public/sw.js", // 生成される場所
});

export default withSerwist({
  // 通常のNext.js設定をここに記述
});

// next.config.ts
// Next.js + Serwist (PWA) の設定ファイル。
// output: "export"（静的エクスポート）でも SW のビルド・登録・ランタイムキャッシュは動作する。
// ただし __SW_MANIFEST への HTML ページの自動注入は未対応のため、
// オフライン対応でページをプリキャッシュしたい場合は additionalPrecacheEntries で手動指定する。
// 開発中は disable: true を設定してキャッシュによるデバッグ困難を回避することを強く推奨。

import withSerwistInit from "@serwist/next";
import type { NextConfig } from "next";

// 1. Serwist（Service Worker）の設定
const withSerwist = withSerwistInit({
  swSrc: "src/app/sw.ts",
  swDest: "public/sw.js",
 
  // 開発中は SW を無効化（キャッシュによる「コード変えたのに反映されない」を防ぐ）
  disable: process.env.NODE_ENV === "development",
  
  // output: "export" では __SW_MANIFEST に HTML が含まれないため、
  // オフラインで表示したいページは以下のように手動でプリキャッシュエントリを追加する
  // ※オフラインでの使用を想定していない場合は不要
  // additionalPrecacheEntries: [
  //   { url: "/", revision: crypto.randomUUID() },
  //   { url: "/offline", revision: crypto.randomUUID() },
  // ],
});

// 2. Next.js 本体の設定
const nextConfig: NextConfig = {
  output: "export",       // 静的エクスポート
  trailingSlash: true,    
  images: {
    unoptimized: true,    // 静的エクスポート時は Next.js の画像最適化が使えないため必須
  },
};

// 3. Serwist でラップして export
export default withSerwist(nextConfig);

// next.config.ts
// Next.js + Serwist (PWA) の設定ファイル。
// output: "export"（静的エクスポート）でも SW のビルド・登録・ランタイムキャッシュは動作する。
// ただし __SW_MANIFEST への HTML ページの自動注入は未対応のため、
// オフライン対応でページをプリキャッシュしたい場合は additionalPrecacheEntries で手動指定する。
// 【重要】Serwist は Turbopack 未対応のため、本番ビルド時のみ有効化している。
// 開発時は `next dev --webpack` を使うか、turbopack: {} を残したまま disable: true で無効化する。

import withSerwistInit from "@serwist/next";
import type { NextConfig } from "next";

// 1. Serwist（Service Worker）の設定
// Serwist は Webpack ベースのため、本番ビルド（next build）時のみ有効化する。
// 開発時に Turbopack を使いたい場合は disable を NODE_ENV !== "production" にする。
const withSerwist = withSerwistInit({
  // Service Worker のソースファイル（app/sw.ts に配置）
  swSrc: "app/sw.ts",
  // ビルド後の出力先（public/sw.js として生成される）
  swDest: "public/sw.js",
  // 本番ビルド以外では SW を無効化（Turbopack との競合 & キャッシュ起因のデバッグ困難を防ぐ）
  disable: process.env.NODE_ENV !== "production",
  // output: "export" では __SW_MANIFEST に HTML が含まれないため、
  // オフラインで表示したいページは以下のように手動でプリキャッシュエントリを追加する
  // additionalPrecacheEntries: [
  //   { url: "/", revision: crypto.randomUUID() },
  //   { url: "/offline", revision: crypto.randomUUID() },
  // ],
});

// 2. Next.js 本体の設定
const nextConfig: NextConfig = {
  output: "export",       // 静的エクスポート（GitHub Pages / S3 等の静的ホスティング向け）
  trailingSlash: true,    // 静的エクスポート時に /about/ のようなスラッシュ付きパスを生成
  images: {
    unoptimized: true,    // 静的エクスポート時は Next.js の画像最適化が使えないため必須
  },
  // Next.js 16 からデフォルトで Turbopack が有効になる。
  // Serwist（Webpack プラグイン）との競合エラーを回避するため空の turbopack 設定を追加。
  // next build は内部的に Webpack を使うため、本番ビルドには影響しない。
  turbopack: {},
};

// 3. Serwist でラップして export
export default withSerwist(nextConfig);

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  },

  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build --webpack",
    "start": "next start",
    "lint": "eslint"
  },

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext", "webworker"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": ["@serwist/next/typings"]
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    ".next/dev/types/**/*.ts",
    "**/*.mts",
    "src/app/summary/components/ShowHideButtons"
  ],
  "exclude": ["node_modules", "public/sw.js"]
}

// @/components/SerwistRegister.tsx
// Service Worker（Serwist）をブラウザに登録するクライアントコンポーネント。
// layout.tsx に配置して全ページで一度だけ実行される。
// HTTPS または localhost 環境でのみ SW を登録する（SW は安全なコンテキストが必須）。
'use client';

import { useEffect } from 'react';

export default function SerwistRegister() {
  useEffect(() => {
    if (typeof window === 'undefined') return;
    if (!('serviceWorker' in navigator)) return;

    const isSecureContext =
      window.location.protocol === 'https:' ||
      window.location.hostname === 'localhost' ||
      window.location.hostname === '127.0.0.1';

    if (!isSecureContext) return;

    navigator.serviceWorker
      .register('/sw.js', { scope: '/' })
      .then((registration) => {
        console.log('[SW] Registered:', registration.scope);
      })
      .catch((error) => {
        console.error('[SW] Registration failed:', error);
      });
  }, []);

  return null;
}

    <html lang="ja">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        suppressHydrationWarning
      >
        {/* Service Worker を登録するクライアントコンポーネント */}
        <SerwistRegister />
        <AuthProvider>
          <Header />
          {children}
        </AuthProvider>
      </body>
    </html>
  );