Prerequisites
Before we start, make sure that you already have a Next.js app with version 9 or higher.
Getting started
To get started we will install the required next-pwa
npm package.
npm i next-pwa
If you already have a next.config.js
file, you will need to wrap your configs with the withNextPWA
function:
const withNextPWA = require("next-pwa");
module.exports = withNextPWA({
/*
...
Rest of the config here
...
*/
});
Tip: You can create a manifest.json
file in your public
folder. This file can hold more of
your PWA configuration.
Configuring next-pwa
We need to add a few more options in our Next.js config to properly setup next-pwa.
We also need to disable next-pwa for development
to avoid this weird error.
const withNextPWA = require("next-pwa");
module.exports = withNextPWA({
/*
...
Rest of the config here
...
*/
pwa: {
// disable for development.
disable: process.env.NODE_ENV === "development",
// this is the path where the sw.js file will be located.
dest: "public",
/** View more options here: https://www.npmjs.com/package/next-pwa#available-options */
},
});
Usage
When building your next app (next build
). This will automatically pick up the next-pwa configuration and build the PWA too.
Once it's done building, you should see 2 new files in your public
folder created by next-pwa.
Tip: Add these files to a .gitignore
to avoid conflicts when using version control.
Sample .gitignore
public/*.js
public/*.js.map
Weird Error
If you're in development
and run into the following issues:
- Very slow page loads
- Development server hanging
pages is undefined
errors
This can mean that there's a service worker registered. For some reason this can break the Next.js development server. To unregister this service worker, do the following steps below:
- Open your DevTools (F12)
- Find the
Application
tab - Open the
Service Workers
tab in the sidebar - Unregister all service workers