App Router + Pages Router
Works with both routers, on the Node and Edge runtimes. ReachBellScript ships as a Client Component so it never accidentally fetches at build time.
Integration
ReachBell for Next.js
Drop one <ReachBellScript /> into app/layout.tsx and call the typed server actions from anywhere. Works on the App Router, Pages Router, Edge, and self-hosted.
Install
One package covers client and server entrypoints.
npm install @reachbell/next
# or
pnpm add @reachbell/nextQuick start
Mount the script once, then call reachbell.send() from any server action.
// app/layout.tsx
import { ReachBellScript } from '@reachbell/next';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<ReachBellScript
projectId={process.env.NEXT_PUBLIC_REACHBELL_PROJECT_ID!}
strategy="afterInteractive"
prompt={{ delay: 8000, placement: 'bottom-right' }}
/>
</body>
</html>
);
}
// app/checkout/actions.ts
'use server';
import { reachbell } from '@reachbell/next/server';
export async function notifyOrderShipped(userId: string, orderId: string) {
await reachbell.send({
to: { userId },
channel: 'push',
template: 'order-shipped',
data: { orderId, trackingUrl: `/orders/${orderId}` },
});
}What you get
Marketing push, transactional pings, segments, A/B tests, and automations — one SDK with both client and server entrypoints.
Server actions, typed
Import reachbell from @reachbell/next/server and call send(), schedule(), identify() inside any server action — credentials never leak to the client bundle.
Transactional email + push
Send order receipts, password resets, and shipping pings via the same typed API that powers marketing campaigns. One SDK, two surface areas.
Built for Vercel and self-hosted
Tested on Vercel, Netlify, AWS Amplify, Fly.io, Coolify, and bare Docker. Env vars are read once at module init — no cold-start tax per request.
Segments, A/B, automations
Every identify() call from a server action or client component feeds the same segment engine, A/B variants, and automations canvas in the dashboard.
Source-mapped, sub-7 KB
Client bundle is 6.8 KB gzipped with source maps published to npm so stack traces in production point to readable code.
Looking for the full API reference?
Server-action signatures, middleware patterns, and the full Edge runtime support matrix live at docs.reachbell.com/integrations/nextjs.
FAQ
Questions, answered.
Everything teams usually ask before switching. Something missing? Email us — a human replies.
Does it work with the App Router and React Server Components?
Yes. ReachBellScript is a Client Component so it never accidentally tries to fetch the SDK at build time. Server actions import from @reachbell/next/server and run only on the server runtime.
What about the Edge runtime?
The server entrypoint detects edge vs node and uses fetch + Web Crypto under the hood, so middleware and edge routes can call reachbell.send() with no extra config.
Where do I put my service worker?
Drop reachbell-sw.js into the public/ folder once — Next serves it from the root, which the Push API requires. The script auto-registers on first opt-in.
Can I use this with a Next.js + tRPC stack?
Yes. Call the server SDK from any tRPC procedure or route handler — the typed API surface is the same as in server actions, with a single shared instance.
Stop juggling four SDKs.
One SDK, one bill, one audit log. Free for your first 1,000 subscribers.