Add an install prompt to Next.js
To add an install prompt on Next.js, paste the InstantPWA snippet into app/layout.tsx or pages/_document.tsx via root layout via next/script with strategy="afterInteractive". The popup captures the browser's native install signal where supported and falls back to a guided walkthrough on iOS Safari, so every visitor sees a clear path to installing your Next.js site as an app.
Steps
- 1
Open app/layout.tsx or pages/_document.tsx
Go to root layout via next/script with strategy="afterInteractive".
- 2
Paste the InstantPWA snippet
Drop the one-line async script tag in the Next.js head section — no build step or dependency install.
- 3
Configure the trigger
In your InstantPWA dashboard, set when the popup appears — on page load, after N seconds, or after a scroll/engagement threshold.
- 4
Publish
Save/publish in Next.js so the change goes live — most builders require an explicit publish step before custom code runs.
- 5
Verify on a phone
Open your live Next.js URL on a mobile device (not the editor preview) to confirm the popup renders.
Constraints to know
- App Router and Pages Router both work, but the script must be a Client Component boundary (next/script) — plain <script> tags inside a Server Component layout get stripped by React's hydration diffing.
- On Vercel Edge Middleware or strict CSP setups, add the InstantPWA domain to script-src or the snippet will be blocked silently.
FAQ
Does the install prompt work on iOS Next.js visitors?+
iOS Safari never fires the native beforeinstallprompt event, so InstantPWA shows a share-sheet walkthrough instead — visitors still get a clear add-to-home-screen path.
Will this conflict with other scripts on my site?+
No — InstantPWA is a single first-party async script with no third-party dependencies, so it doesn't block or compete with analytics or chat widgets.
Do I need to touch anything else in Next.js besides root layout via next/script with strategy="afterInteractive"?+
No — the head snippet is the only integration point; InstantPWA hosts the manifest and service worker for you.