Step 1: Set up your Nextjs project on your computer.

npx create-next-app@latest 
my-pwa-app cd my-pwa-app

Step 2: Install PWA Dependency next-pwa .

npm install next-pwa

Step 3: update the next.config.js file.

Now open next.config.js or next.config.mjs file and add this code to configure PWA in your project.

// next.config.js or next.config.mjs
import withPWA from "next-pwa";
/** @type {import('next').NextConfig} */

const nextConfig = {};

export default withPWA({
  dest: "public", // destination directory for the PWA files
  disable: process.env.NODE_ENV === "development", // disable PWA in the development environment
  register: true, // register the PWA service worker
  skipWaiting: true, // skip waiting for service worker activation
})(nextConfig);

The next-pwa package will automatically generate a service worker for you. This service worker handles caching and offline capabilities.

Step 4: Create a manifest.json File.

You can create manifest files or icon images for different devices easily with the help of these websites https://www.pwabuilder.com/imageGenerator and https://progressier.com/pwa-manifest-generator.

{
  "name": "My PWA App",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "description": "A progressive web app built with Next.js 14",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Step 5: Add the Icons file to your public directory.

Please make sure you have the appropriate icon files in the public directory (icon-192x192.png and icon-512x512.png).

Step 6: Now update your metadata.

Now navigate to /app/layout.js and just link your manifest.json file to your metadata object.

export const metadata = {
  manifest: "/manifest.json",
};

Step 6: Finally build and test your PWA app.

npm run build
npm start

This is how you can make your PWA app and also you can use these steps for your existing project.