How to setup next-pwa with Next.js

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

bash

If you already have a next.config.js file, you will need to wrap your configs with the withNextPWA function:

next.config.js

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.

next.config.js

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

.gitignore

public/*.js
public/*.js.map

txt

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