next-push iconnext-push
next-push icon

Web Push for Next.js

React hooks, VAPID-signed sender, and Service Worker helpers — all from one TypeScript-first package.

@piro0919/next-pushMIT

Live demo

Web Push is not supported in this browser. On iOS, use the Share menu → Add to Home Screen and open this page from the home screen.

Quick start

1. Install

Installs the package and scaffolds a working demo in your Next.js app.

pnpm add @piro0919/next-push
npx next-push init

2. Use the hook

SSR-safe hook: registers the SW, requests permission, and tracks subscription state.

'use client';
import { usePush } from "@piro0919/next-push";

const { subscribe, unsubscribe, subscription } = usePush();

3. Send a push

Edge-runtime compatible sender with typed SendResult (ok / gone / retryable).

import { sendPush } from "@piro0919/next-push/server";

await sendPush(subscription, {
  title: "Hello",
  body: "World",
  url: "/inbox",
});