I am going to convert the default Next.js template into a PWA, you can convert your own web app.

npm i next-pwa # npm
yarn add next-pwa # yarn

We are going to need a 512x512 and a 192x192 icon. Add these two icons in the pubic directory.

Inside the public directory create a file name manifest.json. You can use a manifest creator but I have created my manifest, so you can copy that as well.

Next PWA demo

We will now create a _document.js file inside our pages folder.


import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link rel="manifest" href="/manifest.json" />
          <link rel="apple-touch-icon" href="/icon.png"></link>
          <meta name="theme-color" content="#fff" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

We are now going to create a next.config.js file in the root of our directory.

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

module.exports = withPWA({
  pwa: {
    dest: "public",
    register: true,
    skipWaiting: true,
  },
});

This is going to create our progressive web app.

In the top left corner of the tab, you will be able to see an install button.

Now if you click on install an app will get installed and popup.

Congratulations 🥳! You have successfully created your 1st Progressive Web App(PWA) ✌

https://medium.com/geekculture/how-to-make-a-next-js-app-a-pwa-a5e2b13da548

Creating A NextJS Progressive Web App