Skip to main content

Create progressive web apps with Next.js.

next-pwa enables you to create PWAs with Next.js. No configuration needed, yet so configurable.

Get started

Easy to setup

Just wrap your Next config with withPWA and you are ready to go! You do not need to configure much, but there are many options to customize next-pwa to your liking.

const withPWA = require("@ducanh2912/next-pwa").default({
  dest: "public",
});

module.exports = withPWA({
  // Your Next.js config
});

TypeScript support

next-pwa is built with TypeScript. As you configure next-pwa, you will get type hints and detailed description of its options. If you directly wrap your Next config with withPWA, it will automatically be typed with NextConfig!

// @ts-check
const withPWA = require("@ducanh2912/next-pwa").default({
  // You will get hints as you type here. You can also hover over these options
  // to get a detailed description about them!
  dest: "public",
});

// Your Next config is automatically typed with NextConfig!
module.exports = withPWA({
  reactStrictMode: "true", // Type 'string' is not assignable to type 'boolean | null | undefined'.
});

Configurable

There are just so many options thanks to Workbox's extensive API 🤯 You can disable the plugin, change how it caches stuff at runtime, silent its logging, add your custom code to the service worker or even write the service worker yourself!

We are working hard to add useful features to the plugin! You can help by contributing to the repository or creating feature requests!

const withPWA = require("@ducanh2912/next-pwa").default({
  dest: "public",
  // disable: process.env.NODE_ENV === "development",
  // register: true,
  // scope: "/app",
  // sw: "service-worker.js",
  // customWorkerDest: "service-worker",
  // cacheStartUrl: true,
  // dynamicStartUrl: true,
  // dynamicStartUrlRedirect: "/foo/bar",
  // cacheOnFrontendNav: true,
  // aggressiveFrontEndNavCaching: true,
  // scope: "/beta",
  // workboxOptions: {},
  // ...
});

module.exports = withPWA({
  // Your Next.js config
});