Enable PWA with next.js 13 or later using next-pwa (disabled in development environment)

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • next-pwa

    Zero config PWA plugin for Next.js, with workbox 🧰

  • /** @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);

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts