nextjs-websocket

library1.0.11jsnpmunverified

A React component for WebSocket communication designed to work seamlessly with Next.js, including server-side rendering. Version 1.0.11 is the latest stable release; the package has not been updated since 2022. It forks react-websocket and adds Next.js compatibility, with support for automatic reconnection, debug logging, and hooks-like callbacks. Package maintainer recommends it for simple live data feeds such as real-time counters or chat, but it lacks modern features like hooks or TypeScript definitions.

messaging

npm install nextjs-websocket

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · NEXTJS-WEBSOCKET

nextjs-websocket

messagingjavascriptv1.0.11

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Websocket

✓ import { Websocket } from 'nextjs-websocket'

✗ import Websocket from 'nextjs-websocket'

The library exports a named component, not a default export.

Websocket

✓ const { Websocket } = require('nextjs-websocket')

CommonJS destructuring works; require on its own returns an object with Websocket.

useWebSocket

✓ import { useWebSocket } from 'nextjs-websocket'

✗ const useWebSocket = require('nextjs-websocket').useWebSocket

Added in v1.0.8. This hook is available but undocumented; requires React >=16.8. Ensure hooks are only used in client components in Next.js App Router.

Shows a minimal React component using the Websocket component to receive live numeric data and display it.

import React from 'react'; import { Websocket } from 'nextjs-websocket'; function LiveCount() { const [count, setCount] = React.useState(0); const handleMessage = (data) => { const parsed = JSON.parse(data); setCount(parsed.value); }; return ( <div> Live count: {count} <Websocket url={process.env.NEXT_PUBLIC_WS_URL ?? 'ws://localhost:4000/live'} onMessage={handleMessage} /> </div> ); } export default LiveCount;

Debug

Known issues

deprecatedWebsocket component requires a class component or wrapping in a function component that does not use hooks. The library is not actively maintained and may not receive future updates.

fix

Consider migrating to a maintained library like react-use-websocket or native WebSocket with useEffect.

affects: >=1.0.0

gotchaIn Next.js App Router, the Websocket component must be wrapped in a client component because it uses browser APIs.

fix

Add 'use client' directive at the top of the file using Websocket.

affects: >=1.0.0

gotchaThe onMessage callback receives raw string data, not parsed. Developers often forget to parse JSON.

fix

Use JSON.parse(data) inside onMessage (or handle errors).

affects: >=1.0.0

breakingVersion 1.0.8 changed the component from default export to named export. Old imports breaking.

fix

Change import Websocket from 'nextjs-websocket' to import { Websocket } from 'nextjs-websocket'.

affects: >=1.0.8

Errors

Common errors & fixes

Module parse failed: The keyword 'import' is reserved

Using ES module syntax in a CommonJS environment without transpilation.

fix

Use require('nextjs-websocket') or configure webpack/babel for ES modules.

WebSocket is not defined

Next.js server-side rendering tries to execute the component in a Node environment where WebSocket is not available.

fix

Wrap the component in a dynamic import with { ssr: false } or move it to a client component with 'use client' directive.

Cannot read properties of undefined (reading 'onMessage')

The onMessage prop is required but not provided, or it's a method from a class component that loses binding.

fix

Ensure onMessage is a bound function (e.g., this.handleMessage.bind(this)) or use arrow function.

Upgrade

Version history

1.0.11latest on npm

Audit

Dependencies

reactrequiredPeer dependency: requires React 16.8+ for hooks or component lifecycle

Agent activity

17 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/alamorre/nextjs-websocket ↗

packagenextjs-websocket ↗

homepagehttps://github.com/alamorre/nextjs-websocket#readme ↗