Create progressive web apps with Next.js.
next-pwa
enables you to create PWAs with Next.js. No configuration needed, yet so configurable.
Get startedEasy 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
});