InstantPWA on Next.js
Use next/script in app/layout.tsx (App Router) or pages/_document.tsx (Pages Router) with strategy="afterInteractive". InstantPWA takes care of the manifest and service worker even when you host on Vercel edge functions.
Install: Full support
Web push: Full support
App Router and Pages Router, Vercel + self-hosted.
How to set it up
- 1
Import next/script
In app/layout.tsx add <Script src="..." strategy="afterInteractive" />.
- 2
Deploy to Vercel or your host
No middleware or edge config required.
- 3
Verify on mobile
Open the deployed URL on a phone to see the install popup.
Want the full technical guide?
Manifest, service worker and code samples for Next.js.
Common tasks on Next.js
FAQ
Does it work with the App Router server components?+
Yes — next/script is client-only by design, so it composes cleanly with server components.