Building a PWA with Next.js: Complete Guide

Progressive Web Apps combine the reach of the web with the capabilities of native apps. Here is how to build one with Next.js.

The Web App Manifest

Create a manifest.json in your public directory. It defines your app name, icons, theme color, and display mode. Set display: "standalone" for a native-like experience without browser chrome. Link it in your layout with a meta tag.

Service Worker Setup

The service worker is the heart of a PWA. It intercepts network requests and serves cached responses when offline. Use the next-pwa package or @serwist/next for Next.js integration. Configure caching strategies: cache-first for static assets, network-first for API calls.

Offline Support Strategy

Decide what works offline. Static pages and assets should always be cached. API data can use a stale-while-revalidate strategy — serve cached data immediately while fetching fresh data in the background. Show clear UI indicators when the user is offline.

Push Notifications

Register for push notifications using the Push API. Store subscription endpoints on your server. Use web-push libraries to send notifications. Always provide clear opt-in flows and respect user preferences.

Testing and Deployment

Use Chrome DevTools Application panel to inspect the manifest, service worker, and cache storage. Lighthouse audits check PWA compliance. Test offline behavior by toggling the network in DevTools. Deploy to HTTPS — service workers require a secure context.

Results You Can Expect

PWAs typically see 2-3x improvement in page load times for repeat visits and significant engagement increases from home screen installation. The investment in service worker caching pays off immediately.