nextjsreactpush-notificationstutorial

How to Send Push Notifications from Next.js (App Router & Server Actions)

A practical guide to sending real-time push notifications from a Next.js application using Server Actions, Route Handlers, and the FlowAlert API — with TypeScript examples.

FlowAlert TeamMay 12, 2026 6 min read

How to Send Push Notifications from Next.js (App Router & Server Actions)

Push notifications from a Next.js app are something most guides get wrong. They either walk you through building a full WebSocket server, setting up Firebase Cloud Messaging boilerplate, or mucking around with service workers — all just to fire an alert to yourself when a user signs up.

This guide takes a different approach: use the FlowAlert REST API from your Next.js backend (Server Actions or Route Handlers) to send push notifications to any mobile device in under 10 lines of code.

When You Need This

User signed up → send yourself a push notification
New payment → immediate alert before the Stripe dashboard updates
Form submitted → get the lead on your phone while it's hot
Background job failed → wake you up before users notice
Any server-side event → notify the right person instantly

Setup

1. Install the SDK (optional — or just use fetch)

FlowAlert has a simple REST API. No SDK required:

npm install @flowalert/node
# or just use native fetch — no package needed

2. Add your API key to environment variables

# .env.local
FLOWALERT_API_KEY=fa_live_xxxxxxxxxxxx

Never commit this to git. Add it to your Vercel/Netlify environment variables for production.

The Core Utility Function

Create lib/notify.ts:

const FLOWALERT_API = 'https://api.flowalert.io/v1/events';

type Priority = 'LOW' | 'NORMAL' | 'HIGH' | 'URGENT';

interface NotifyOptions {
  event: string;
  title: string;
  body: string;
  priority?: Priority;
  data?: Record<string, unknown>;
  url?: string;
}

export async function notify(options: NotifyOptions): Promise<void> {
  const apiKey = process.env.FLOWALERT_API_KEY;
  if (!apiKey) return; // gracefully no-op if not configured

  try {
    await fetch(FLOWALERT_API, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Api-Key': apiKey,
      },
      body: JSON.stringify({
        event: options.event,
        title: options.title,
        body: options.body,
        priority: options.priority ?? 'NORMAL',
        data: options.data,
        url: options.url,
      }),
    });
  } catch {
    // Never let notification failures crash your app
  }
}

The try/catch is important — you never want a notification failure to bubble up and break user-facing flows.

Using It in a Server Action

// app/actions/auth.ts
'use server';

import { notify } from '@/lib/notify';
import { db } from '@/lib/db';
import { hash } from 'bcryptjs';

export async function registerUser(formData: FormData) {
  const email = formData.get('email') as string;
  const name = formData.get('name') as string;

  const user = await db.user.create({
    data: { email, name, passwordHash: await hash(formData.get('password') as string, 12) },
  });

  // Fire notification in parallel — don't await it in the critical path
  notify({
    event: 'user.registered',
    title: '👤 New Sign-up',
    body: `${name} (${email}) just created an account`,
    priority: 'NORMAL',
    data: { userId: user.id, email },
  });

  return { success: true };
}

By not awaiting the notify() call, it fires in the background without adding any latency to the user's registration experience.

Using It in a Route Handler

// app/api/contact/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { notify } from '@/lib/notify';

export async function POST(req: NextRequest) {
  const body = await req.json();
  const { name, email, message } = body;

  // Save to your DB here...

  // Notify in background
  notify({
    event: 'contact.form_submitted',
    title: '📩 New Contact Form Submission',
    body: `${name} (${email}): ${message.slice(0, 80)}`,
    priority: 'HIGH',
    data: { name, email, message },
  });

  return NextResponse.json({ ok: true });
}

Stripe Webhook → Push Notification

This is one of the most valuable use cases. Know the moment money hits your account:

// app/api/webhooks/stripe/route.ts
import { NextRequest, NextResponse } from 'next/server';
import Stripe from 'stripe';
import { notify } from '@/lib/notify';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export async function POST(req: NextRequest) {
  const sig = req.headers.get('stripe-signature')!;
  const body = await req.text();

  let event: Stripe.Event;
  try {
    event = stripe.webhooks.constructEvent(body, sig, process.env.STRIPE_WEBHOOK_SECRET!);
  } catch {
    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 });
  }

  if (event.type === 'payment_intent.succeeded') {
    const pi = event.data.object as Stripe.PaymentIntent;
    const amount = (pi.amount / 100).toFixed(2);
    const currency = pi.currency.toUpperCase();

    notify({
      event: 'stripe.payment_succeeded',
      title: `💰 Payment — ${currency} ${amount}`,
      body: `Payment from ${pi.receipt_email ?? 'unknown'} confirmed`,
      priority: 'HIGH',
      data: { paymentIntentId: pi.id, amount: pi.amount, currency: pi.currency },
    });
  }

  if (event.type === 'customer.subscription.deleted') {
    const sub = event.data.object as Stripe.Subscription;
    notify({
      event: 'stripe.subscription_cancelled',
      title: '⚠️ Subscription Cancelled',
      body: `Customer ${sub.customer} cancelled their subscription`,
      priority: 'URGENT',
    });
  }

  return NextResponse.json({ received: true });
}

Background Job Failure Alert

If you're running cron jobs or background processing with Vercel Cron or a queue:

// app/api/cron/sync-orders/route.ts
import { NextResponse } from 'next/server';
import { notify } from '@/lib/notify';

export const dynamic = 'force-dynamic';

export async function GET() {
  try {
    await syncOrdersFromExternalAPI();
    return NextResponse.json({ ok: true });
  } catch (error) {
    // This wakes you up immediately instead of waiting for a monitoring alert
    await notify({
      event: 'cron.sync_orders_failed',
      title: '🚨 Cron Job Failed: Order Sync',
      body: error instanceof Error ? error.message : 'Unknown error',
      priority: 'URGENT',
    });
    return NextResponse.json({ error: 'Sync failed' }, { status: 500 });
  }
}

Note: Here we await the notify call because we want to ensure the alert is sent before returning the error response. In a cron context this is fine.

Routing Rules for Your Next.js App

In the FlowAlert dashboard, set up routing rules that match the event keys you used in your code above:

Event Key	Who Gets Notified	Priority	Requires Ack
`user.registered`	Founder	NORMAL	No
`stripe.payment_succeeded`	Finance	HIGH	No
`stripe.subscription_cancelled`	Founder + CS	URGENT	Yes
`cron.sync_orders_failed`	Engineering	URGENT	Yes

These event keys are examples you define yourself. The key you send in your code and the key on your FlowAlert routing rule just need to match — you can name them whatever makes sense for your project.

You can use cron.* as a single routing rule to catch all cron job failures, or create one rule per event key for more granular routing. A consistent naming convention (e.g. cron.sync_orders_failed, cron.send_emails_failed) makes both approaches easy to manage.

Summary

Sending push notifications from Next.js is just an async fetch call. No service workers, no Firebase project setup, no VAPID keys. Drop the notify() utility into any Server Action or Route Handler and start getting alerted on the events that matter.

Start with FlowAlert →

All posts Try FlowAlert free