How to turn a Next.js app into a PWA using next-pwa plugin:

  1. Install next-pwa

    yarn add next-pwa

  2. Update next.config.js

    const withPWA = require('next-pwa')({ dest: 'public' })

// ...

module.exports = withPWA(nextConfig)

  3. Create a .webmanifest file and place it in the public directory

  4. Add a <link> tag to the <head> of pages/_document.js

    <link rel="manifest" href="/manifest.json">