Next.js 13 以降で PWA を有効にするその2（開発環境にも対応）

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

多分、その内 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,
    buildExcludes: ["app-build-manifest.json"],
});

const generateAppDirEntry = (entry) => {
    const packagePath = require.resolve("next-pwa");
    const packageDirectory = path.dirname(packagePath);
    const registerJs = path.join(packageDirectory, "register.js");

    return entry().then((entries) => {
        // Register SW on App directory, solution: 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;
    });
};
const nextConfig = {
    experimental: {
        appDir: true,
    },
    reactStrictMode: true,
    webpack(config) {
        if( !isDev ){
            const entry = generateAppDirEntry(config.entry);
            config.entry = () => entry;
        }
        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の一番最後に出てきたコード。

先週公開した記事では、ビルド時のエラーは出なくなるが、開発の時にエラーが出て困っていた（勝手に困ってろ）。 nextConfigのwebpack関数の所を処理することで、なんか上手く動いた。 当面はこれが一番扱いやすいパッチだと思う。