How to Build Real-Time Apps with Next.js: From WebSockets to Edge Functions

1. Why Real-Time in Next.js Feels “Tricky”

Next.js is mostly associated with static generation, SSR, and page rendering. Real-time, on the other hand, is usually tied to persistent connections, long polling, or WebSockets stuff that seems at odds with a framework designed for caching and edge delivery.

But thanks to API routes, edge functions, and Server Actions, you can absolutely bring real-time interactivity into Next.js.

2. Option 1: Raw WebSockets with a Node.js Server

This is the most direct way to go real-time. You set up a WebSocket server and connect to it from your client.

Step 1: Setup a WebSocket Server Create a basic WebSocket server using ws:

// server.js
const WebSocket = require(’ws’);
const server = new WebSocket.Server({ port: 3001 });
 
server.on(’connection’, (ws) => {
 ws.send(’Connected!’);
 ws.on(’message’, (message) => {
   console.log(’Received:’, message);
 });
});

Step 2: Connect from your Next.js app

useEffect(() => {
 const socket = new WebSocket(’ws://localhost:3001’);
 socket.onmessage = (e) => {
   console.log(’Message from server:’, e.data);
 };
 return () => socket.close();
}, []);

Tip: If you deploy to Vercel or similar, host your WebSocket server separately (e.g., on Heroku, Railway, or Fly.io) since Vercel doesn’t support WebSocket servers directly.

3. Option 2: Pusher or Ably for Managed Real-Time

If you don’t want to manage your own WebSocket server (I get it, been there), Pusher and Ably are lifesavers.

Using Pusher:

// Client
import Pusher from ’pusher-js’;
const pusher = new Pusher(’YOURAPPKEY’, {
 cluster: ’YOUR_CLUSTER’,
});
 
const channel = pusher.subscribe(’my-channel’);
channel.bind(’my-event’, (data) => {
 console.log(’Received update:’, data);
});

Server-side event trigger (API route):

import Pusher from ’pusher’;
const pusher = new Pusher({
 appId: ’APP_ID’,
 key: ’APP_KEY’,
 secret: ’APP_SECRET’,
 cluster: ’YOUR_CLUSTER’,
 useTLS: true,
});
await pusher.trigger(’my-channel’, ’my-event’, {
 message: ’Hello from server’,
});

Use Case: I used this setup for a live notifications panel, worked beautifully without needing to manage sockets myself.

4. Option 3: Real-Time + Server Actions (Next.js 14+)

If you’re using Next.js 14+, Server Actions are another way to streamline dynamic behavior.

Here’s how I used Server Actions with a polling mechanism for chat-like updates:

’use server’;
export async function fetchLatestMessages() {
 const res = await fetch(’https://api.myapp.com/messages’);
 return res.json();
}

Add polling or refetch logic with setInterval, or use SWR/React Query for revalidation.

Not truly real-time—but for low-frequency updates, it gets the job done without setting up sockets.

5. SWR + Polling = Easy Mode for Some Real-Time-Like Needs

Sometimes, you don’t need WebSockets. You just need frequent updates, that’s where swr shines.

const { data } = useSWR(’/api/messages’, fetcher, {
 refreshInterval: 5000, // Refetch every 5 seconds
});

I used this for a stock price component fast, light, and no server infrastructure.

6. Bonus: Edge Functions for Instant Feedback

Real-time feedback doesn’t always need sockets. You can use middleware or edge functions to provide near-instant validations (like form checking or route access).

// middleware.ts
export function middleware(req) {
 const isAuthenticated = checkSession(req);
 if (!isAuthenticated) return NextResponse.redirect(’/login’);
 return NextResponse.next();
}

This type of logic runs close to the user, which feels instant even if it’s not pushing live data.

Final Thoughts

Real-time features don’t have to feel out of place in Next.js. Whether you go low-level with WebSockets, use a service like Pusher, or fake it with smart polling, there’s always a way to get the job done.

For me, the breakthrough came when I realized that "real-time" doesn’t mean just one thing. It’s about choosing the right level of freshness based on what your users need