How to Build a Progressive Web App with Next.js: A Step-by-Step Guide

Progressive Web Apps (PWAs) combine the best of web and mobile apps by offering offline support, push notifications, and home-screen installability. Next.js is an ideal framework for building them, and with the next-pwa package, you can turn your existing Next.js project into a fully-featured PWA in just a few minutes.

Before you begin, ensure you have a Next.js project running (version 12 or newer). This guide covers the essential steps to make your app installable, fast, and reliable even without an internet connection.

1. Install and Configure next-pwa

Start by installing the dependency and wiring it into your Next.js configuration:

• Run npm install next-pwa
• Update next.config.js to wrap your config with withPWA().
• Set register: true and disable: process.env.NODE_ENV === 'development' to auto-register the service worker in production.

2. Add the Web App Manifest

The manifest tells the browser how your app should appear once installed. Define your app name, start URL, theme color, and display mode in next.config.js or via a static manifest.json file. Include at least 192×192 and 512×512 PNG icons, plus a maskable icon for Android compatibility.

3. Enable Offline Support

next-pwa generates a service worker that automatically pre-caches your pages and static assets. This means your app loads instantly even when the network is unavailable. For dynamic data, customise the runtimeCaching option to cache API responses or third-party scripts with strategies like NetworkFirst or StaleWhileRevalidate.

4. Test and Deploy

Run npm run build to confirm the PWA assets are generated correctly. Then use Lighthouse in Chrome DevTools to audit your app—aim for a PWA score above 90. Finally, deploy to a secure HTTPS endpoint, as service workers require a secure context to function.

Conclusion

With just a few lines of configuration, Next.js and next-pwa make PWA development incredibly simple. The result is an app that loads instantly, works offline, and feels native on your users’ devices—ready to install from the browser with a single click.