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.
Read the full setup guide
Code placement, published-site checks and limitations 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.