Next.js 13 以降で PWA を有効にする

2023/5/28追記：さらに良い設定を、新しい記事に書いたので、そちらを参照の事。

多分、その内 next-pwa が対応するので、待ってれば大丈夫だと思うが、どうしても今すぐに対応したい人用のパッチコード。バージョンは、

next ^13.4.2
next-pwa ^5.6.0

となっている。修正するファイルは、next.config.js

next.config.js

/** @type {import('next').NextConfig} */
const path = require("path");
const isDev = process.env.NODE_ENV !== "production";
const withPWA = require("next-pwa")({
    dest: "public",
    disable: isDev,
    exclude: [
        // add buildExcludes here
        ({ asset, compilation }) => {
            if (
                asset.name.startsWith("server/") ||
                asset.name.match(
                    /^((app-|^)build-manifest\.json|react-loadable-manifest\.json)$/
                )
            ) {
                return true;
            }
            if (isDev && !asset.name.startsWith("static/runtime/")) {
                return true;
            }
            return false;
        },
    ],
});

const nextConfig = {
    experimental: {
        appDir: true,
    },
    reactStrictMode: true,
    webpack(config) {
        const registerJs = path.join(
            require.resolve("next-pwa").replace(/index.js/, ""),
            "register.js"
        );
        const entry = config.entry;

        config.entry = () =>
            entry().then((entries) => {
                // Automatically registers the SW and enables certain `next-pwa` features in
                // App Router (https://github.com/shadowwalker/next-pwa/pull/427)
                if (
                    entries["main-app"] &&
                    !entries["main-app"].includes(registerJs)
                ) {
                    if (Array.isArray(entries["main-app"])) {
                        entries["main-app"].unshift(registerJs);
                    } else if (typeof entries["main-app"] === "string") {
                        entries["main-app"] = [registerJs, entries["main-app"]];
                    }
                }
                return entries;
            });

        return config;
    },
};

module.exports = withPWA(nextConfig);

元ネタ

元ネタのコードはNext v13 app-build-manifest.json - Does not register a service worker that controls page and start_url #424。

ちなみに、webpack のオプションの

const registerJs = path.join(
            require.resolve("next-pwa").replace(/index.js/, ""),
            "register.js"
        );

ここは、僕が手を加えた部分。ビルド時のエラーフィックス。特にコメントする必要は無いのでコメントしていないし、そもそも、next-pwa に対応して欲しい所。バージョンアップしてくれないかなぁ。フォークしたプロジェクトがすでに幾つか生えているので、ニーズは大きい。誰かやってくれねーなかぁ。

Next.js は 13 になってから、なんか色々と前の資産が使えなくなっている。 app ディレクトリで色々管理できるのは便利なのだが、Next.js12 で培ったノウハウが割りと使いまわし出来ないのはつらい。フロントエンド周りは過去を振り返らない縛りでもしているのかというくらい、前のめりな界隈なので今更感はあるのだが、実際に自分で対応するようになると色々と文句も出てくるものだ。

とりあえず、今の案件で PWA 対応しなきゃならなかったので、めっちゃ頑張って調べて対応した。日本語情報が乏しいので、頑張る……。やっぱり、英語出来なきゃ駄目だよなぁ。

Loox Uと初音ミクで行こう！

このブログを検索