Real-time WebSockets Integration in Next.js

Modern applications often require real-time data: chat apps, stock dashboards, multiplayer games, or live notifications. While Next.js focuses on SSR/SSG, integrating WebSockets with libraries like Socket.IO is straightforward.

📌 When to Use WebSockets?

• Real-time chat applications.
• Live dashboards and stock tickers.
• Collaborative document editors.
• Multiplayer games and quizzes.

🔧 Setting Up Socket.IO with Next.js

Install Dependencies

npm install socket.io socket.io-client

Setup a Custom Server (server.js)

const { createServer } = require('http');
const next = require('next');
const { Server } = require('socket.io');

const app = next({ dev: true });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = createServer((req, res) => handle(req, res));
  const io = new Server(server);

  io.on('connection', (socket) => {
    console.log('New user connected');
    socket.emit('welcome', 'Hello from server');
  });

  server.listen(3000);
});

🚀 Conclusion

With a lightweight custom server and Socket.IO, you can easily deliver interactive, real-time experiences inside your Next.js applications.