Can I use WebSockets with Next.js App Router?

Yes. Apinator uses a client-side WebSocket SDK that works in any React Client Component. Your Route Handlers handle channel authentication, so there is no need for a persistent WebSocket server in your Next.js deployment.

How do I add realtime notifications to Next.js?

Install @apinator/client and @apinator/server. Create a POST Route Handler for WebSocket channel authentication, subscribe to a private channel in a React Client Component using useEffect, then trigger events from any Route Handler or Server Action.

Does Apinator work with Next.js Server Components?

The @apinator/server SDK works in Route Handlers, Server Actions, and Edge Functions. The @apinator/client SDK is used in Client Components (marked with "use client") for WebSocket subscriptions.

Is Apinator free to use with Next.js?

Yes, Apinator has a free plan with no credit card required. You can add WebSocket channels and real-time notifications to your Next.js app at no cost.

Does Apinator work with Vercel deployments?

Yes. The server SDK uses standard Web Fetch APIs and works on both Vercel Node.js and Edge runtimes. The client SDK opens a persistent WebSocket connection from the browser, so serverless cold starts do not affect realtime performance.

Server + Client SDK

Realtime WebSocket Notifications for Next.js

Add WebSocket channels and real-time notifications to Next.js. Works with App Router and Pages Router — no dedicated WebSocket server needed.

Get Started Free View Docs

Server $ npm install @apinator/server

Client $ npm install @apinator/client

Adding real-time WebSocket notifications to a Next.js app used to mean managing your own persistent server — which conflicts with Next.js's stateless, serverless architecture. Apinator solves this: hosted WebSocket infrastructure that connects to your Next.js Route Handlers for channel authentication and your Server Actions or API routes for event publishing. Add live WebSocket channels to any Next.js project in under 5 minutes.

Quick Start

How to add WebSocket notifications to Next.js App Router

Add realtime features to your Next.js app in a few steps.

Install both SDKs

Add the server SDK for signing WebSocket channel auth in Route Handlers, and the client SDK for subscribing to channels in React components.

npm install @apinator/server @apinator/client

Create a WebSocket auth Route Handler

Add a POST Route Handler that signs WebSocket channel subscription requests using your app secret. Required for private and presence channels.

// app/api/realtime/auth/route.ts
import { Apinator } from '@apinator/server'
import { NextResponse } from 'next/server'

const realtime = new Apinator({
  appId: process.env.REALTIME_APP_ID!,
  key: process.env.REALTIME_KEY!,
  secret: process.env.REALTIME_SECRET!
})

export async function POST(req: Request) {
  const { socket_id, channel_name } = await req.json()
  const auth = realtime.authenticateChannel(socket_id, channel_name)
  return NextResponse.json(auth)
}

Subscribe to a WebSocket channel

Open a persistent WebSocket connection and subscribe to channels from a React Client Component. Bind event handlers in useEffect for proper cleanup.

'use client'

import { Apinator } from '@apinator/client'
import { useEffect, useState } from 'react'

const client = new Apinator({
  appKey: process.env.NEXT_PUBLIC_REALTIME_KEY!,
  cluster: 'us',
  authEndpoint: '/api/realtime/auth'
})

Trigger notifications from your server

Publish WebSocket events from Route Handlers, Server Actions, or any API route. All subscribed clients receive the real-time notification instantly.

// app/api/notify/route.ts
export async function POST(req: Request) {
  const data = await req.json()

  await realtime.trigger({
    name: 'new-notification',
    channel: 'private-notifications',
    data: JSON.stringify(data)
  })

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

Why Next.js

Built for Next.js developers

Route Handler Auth

Authenticate private and presence WebSocket channels from Next.js Route Handlers. HMAC-SHA256 signed tokens, zero config, works on Vercel Edge and Node.js runtimes.

React Hooks Compatible

Client WebSocket SDK designed for React component lifecycles. Initialize once, subscribe in useEffect, automatic cleanup on unmount — no memory leaks.

TypeScript-First

Full TypeScript support for both server and client SDKs. Typed events, channels, options, and responses out of the box.

Edge Compatible

Server SDK uses standard Web APIs. Works in Vercel Edge Functions, Middleware, and Node.js runtimes alike.

Why WebSockets in Next.js need a different approach

Next.js is built on a serverless-first model: Route Handlers spin up on demand and shut down immediately after responding. This stateless architecture makes it impossible to maintain a persistent WebSocket server — the kind you'd need to push real-time notifications to connected browser clients. Traditional WebSocket libraries like ws or socket.io require a long-running Node.js process, which conflicts with how Next.js App Router deployments work on Vercel or Cloudflare Pages.

Apinator solves this by keeping the persistent WebSocket infrastructure entirely off your Next.js server. Your application handles just two things: authenticating WebSocket channel subscriptions from a Route Handler (a simple HMAC verification), and triggering events via a standard REST call from a Server Action or API route. The real-time WebSocket connection between Apinator's edge servers and your users' browsers is fully managed — no WebSocket server to deploy, scale, or operate. Unlike push notifications, which require a service worker and platform-specific setup, Apinator uses persistent WebSocket connections that work immediately in any modern browser.

The result: real-time WebSocket notifications in Next.js App Router with a few dozen lines of code, no infrastructure changes, and no compatibility issues with serverless deployments.

Full Example

Full Example: Realtime WebSocket Notification Feed in Next.js App Router

Complete WebSocket example: authenticate private channels in a Route Handler, publish events from an API route, and receive real-time notifications in a React Client Component.

app/api/realtime/auth/route.ts

import { Apinator } from '@apinator/server' import { NextResponse } from 'next/server' const realtime = new Apinator({ appId: process.env.REALTIME_APP_ID!, key: process.env.REALTIME_KEY!, secret: process.env.REALTIME_SECRET! }) export async function POST(req: Request) { const { socket_id, channel_name } = await req.json() // Add your own auth check here const auth = realtime.authenticateChannel(socket_id, channel_name) return NextResponse.json(auth) }

Related Docs

Read the core WebSocket guides

Related Use Cases

Explore realtime use cases

Live Chat & Messaging Live Notifications & Activity Feeds Live Dashboards & Analytics

Start building realtime Next.js apps

Completely free. No credit card. No catch.

Get Started Free Read the Docs