Integrasi Web Push Notification di Next.js & React (App Router Ready)
Bangun aplikasi web modern dan PWA di Next.js yang bisa mengirim notifikasi real-time ke layar kunci Android, iPhone (iOS 16.4+), dan Desktop tanpa pusing mengurus Service Worker dari nol.
Siap untuk Next.js 14 & 15
Taruh pushnotif-sw.js di folder public/ dan panggil SDK lewat komponen Script Next.js.
Tembak dari API Route / Action
Kirim notifikasi langsung dari Next.js Server Action menggunakan fetch() standar.
Pasang Otomatis via MCP
Hubungkan https://pushnotif.biz.id/mcp ke Cursor / Claude Code dan biarkan AI menulis kodenya.
Perbandingan Transparan
Kenapa ratusan developer dan pemilik website di Indonesia beralih menggunakan PushNotif:
| Parameter | PushNotif (Indonesia) | Layanan Lama / Manual |
|---|---|---|
| Ukuran Bundle Client | ✓ < 4 KB (Dimuat Async) | Puluhan KB library SDK pihak ketiga |
| Dukungan iOS Safari PWA | ✓ Ya (iOS 16.4+ Home Screen Web App) | Sering gagal tanpa konfigurasi manifest yang tepat |
| Tarif Pengiriman | ✓ Rp 0,20 / pesan (QRIS mulai Rp 1.000) | Tagihan bulanan dalam USD |
Contoh Pemasangan di app/layout.tsx & Server Action Next.js:
Siap Copy-Paste// 1. Di app/layout.tsx (Next.js App Router):
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="id">
<body>
{children}
<Script
src="https://pushnotif.biz.id/sdk/pushnotif.js"
strategy="afterInteractive"
onLoad={() => {
// @ts-ignore
window.PushNotif?.init({ appId: process.env.NEXT_PUBLIC_PUSHNOTIF_APP_ID });
}}
/>
</body>
</html>
);
}Pertanyaan yang Sering Diajukan (FAQ)
Q: Apakah bekerja di Vercel, Netlify, dan Cloudflare Pages?
Ya, 100% bekerja di semua hosting serverless (Vercel, Netlify, Cloudflare Pages, maupun VPS sendiri) karena seluruh proses pengiriman push ditangani oleh server PushNotif.
Q: Bagaimana agar notifikasi muncul di iPhone (iOS)?
Pastikan website Next.js Anda memiliki file manifest.json dan pengguna memilih menu 'Tambahkan ke Layar Utama' (Add to Home Screen) di Safari iOS 16.4 ke atas.
Siap Memasang Push Notification di Website Anda?
Daftar dalam 5 detik, langsung dapatkan 1.000 Kuota Pesan Gratis. Top-up selanjutnya bebas nominal via QRIS mulai Rp 1.000 (tidak pernah hangus).
Ambil 1.000 Kuota Gratis →