Next.js Progressive Web App

Next.js Progressive Web App

4 min read · 696 words · Shared January 3, 2022 by

Article Summary: Turn your Next.js website into a Progressive Web App allowing offline support, push notifications and other great features using the next-pwa package.

What's A Progressive Web App?

Imagine this... you have a website that is complex. It has a frontend, backend, data, and lots of other features.

You want to make an app for your website. Traditionally, you would have to make 2 apps - one for Android and one for IOS. Another more modern option would be to use a cross platform framework such as Flutter or React Native. This still involves a lot of work!

There has to be another way. Luckily for us, there is (kind of). A Progressive Web App, or PWA, is a website that looks and behaves like a mobile app. PWA's even have splash screens!

The user also doesn't have to download your app from the app or play store and your app is always updated whenvever you update your website.

PWA Demo

Here is a simple site I deployed with the next-pwa package. If you open it in Google Chrome or on your phone, you will see a button that says "Install App".

next-pwa Package

Creating a PWA can be difficult. However, with Next.js we can easily create one using the next-pwa package. Under the hook this package uses Workbox. Here are some of the features you get from using next-pwa:


  • 0️⃣ Zero config for registering and generating service worker
  • ✨ Optimized precache and runtime cache
  • 💯 Maximize lighthouse score
  • 🎈 Easy to understand examples
  • 📴 Completely offline support with fallbacks example 🆕
  • 📦 Use workbox and workbox-window v6
  • 🍪 Work with cookies out of the box
  • 🔉 Default range requests for audios and videos
  • ☕ No custom server needed for Next.js 9+ example
  • 🔧 Handle PWA lifecycle events opt-in example
  • 📐 Custom worker to run extra code with code splitting and typescript support example
  • 📜 Public environment variables available in custom worker as usual
  • 🐞 Debug service worker with confidence in development mode without caching
  • 🌏 Internationalization (a.k.a I18N) with next-i18next example
  • 🛠 Configurable by the same workbox configuration options for GenerateSW and InjectManifest
  • 🚀 Spin up a GitPod and try out examples in rocket speed
  • ⚡ Support blitz.js (simply add to blitz.config.js)
  • 🔩 (Experimental) precaching .module.js when next.config.js has experimental.modern set to true

next-pwa Installation

First, Add the next-pwa package. I'll be using yarn.

yarn add next-pwa


We need to create a manifest.json file to tell next-pwa some basic info about our app. We can use this website to help us out.

Go ahead and fill out all the fields that are required and the optional fiels if you'd like. For the display option, be sure to select standalone.

When you are done, download it and move all the files into your public folder. Rename the manifest.webmanifest file to manifest.json.


Add the following code to _document.js inside of the Head tag. If you don't have this file, create it.

  <link rel="manifest" href="/manifest.json" />
  <link rel="apple-touch-icon" href="/icon.png"></link>
  {/* other stuff here */}


Add the following to next.config.js:

const withPWA = require("next-pwa");

module.exports = withPWA({
  pwa: {
    dest: "public",
    register: true,
    skipWaiting: true,
    disable: process.env.NODE_ENV === "development",

These options set up the next-pwa package to work with our project. If you run yarn dev with the disable option commented out, you will see some generated files inside of the public folder. We don't need these in dev so that is the reason we have added that line.

Going one step further, we can add the following to .gitignore so the PWA files will not be tracked by git.

# PWA files


Go ahead and deploy your website. Then navigate to chrome and at the top you should see a button to install the PWA.


Congrats! You have just created a Progressive Web App!

To recap, in this article we:

  • Added the next-pwa package
  • Added the manifest.json file
  • Added the _document.js file
  • Added the next.config.js file
  • Added the .gitignore file
  • Deployed the website

Edit on GitHub

Related Tags


Related Posts

Add Algolia's InstantSearch to Next.js - A Quickstart · December 17, 2021
Generate A Dynamic Sitemap In Next.js Website · September 27, 2021
Add Splitbee Analytics To Next.js · July 20, 2021
Add Google Analytics To Next.js Website · April 29, 2021
Connect Firebase To Next.js · April 15, 2021

On This Page

What's A Progressive Web App?

PWA Demo

`next-pwa` Package


`next-pwa` Installation






View Related Posts

December 17, 2021


Add Algolia's InstantSearch to Next.js - A Quickstart

September 27, 2021


Generate A Dynamic Sitemap In Next.js Website

July 20, 2021


Add Splitbee Analytics To Next.js

April 29, 2021


Add Google Analytics To Next.js Website

April 15, 2021


Connect Firebase To Next.js

Loading author data...




    Privacy Policy

    Carlson Technologies Logo© Copyright 2021 - 2024, Carlson Technologies LLC. All Rights Reserved.