How to Build a PWA With Next.js

Building a Progressive Web App (PWA) with Next.js is an efficient way to create a high-performance web application that offers a native app experience on the web. In this guide, we will outline the essential steps to set up a PWA using Next.js, focusing on configuration, deployment, and best practices.

Step 1: Setting Up Your Next.js Project

To start, ensure you have Node.js installed on your machine. You can check this by running the following command in your terminal:

node -v

Next, create a new Next.js application using the command below:

npx create-next-app your-pwa-app

Replace "your-pwa-app" with your desired project name. Navigate into your project directory:

cd your-pwa-app

Step 2: Installing Necessary Packages

To transform your Next.js app into a PWA, you need to install the next-pwa package. This library simplifies the setup of PWA features:

npm install next-pwa

Step 3: Configuring Your Next.js Application

After installing the package, you need to configure it in your Next.js application. Create or update a file called next.config.js in your project root directory and add the following configuration:

const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
})
module.exports = withPWA({
  // other Next.js config options can be added here
})

This configuration specifies that the service worker will be registered upon app load and will skip waiting during subsequent installs, which is crucial for a smooth UX.

Step 4: Adding a Manifest File

To define how your PWA appears on the home screen, create a web app manifest file. Create a file named manifest.json inside the public folder with the following content:

{
  "short_name": "PWA App",
  "name": "Your Progressive Web App",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

These icon paths will need to correspond to actual icon files that you place in the public directory for your PWA.

Step 5: Updating the HTML Document

To utilize the manifest, you must link it within the pages/_document.js file. If this file does not exist, you can create it. Add the following code inside the Head component:

import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
  render() {
    return (
      
        
          
          
        
        
          
          
        
      
    )
  }
}
export default MyDocument

Step 6: Testing Your PWA

With everything set up, it’s time to test your PWA. Run the application locally using:

npm run dev

Open your browser and navigate to http://localhost:3000. Use Chrome DevTools to inspect the application. Look for the Application tab, where you can see the PWA features such as the service worker and manifest file.

Step 7: Deploying Your PWA

Once you're satisfied with your PWA, you can deploy it to a platform of your choice. Vercel is the recommended hosting provider for Next.js apps,

How to Build a PWA With Next.js