Docs/Client SDKs/Next.js SDK

Next.js SDK

@emitwave/next — SSR-safe real-time hooks for the App Router.

Client SDK· 4 min read

Install

bash

npm install @emitwave/next @emitwave/react @emitwave/js next react

Re-exports @emitwave/react behind a "use client" boundary. The real-time client is browser-only — the provider connects inside an effect, so SSR emits markup and the browser connects on hydration (no socket on the server).

Provider (App Router)

Create a client provider component:

app/emitwave-provider.tsx

// app/emitwave-provider.tsx
'use client'
import { EmitwaveProvider } from '@emitwave/next'

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <EmitwaveProvider appKey={process.env.NEXT_PUBLIC_EMITWAVE_KEY!}>
      {children}
    </EmitwaveProvider>
  )
}

Root layout

Use it in your root layout — a server component:

app/layout.tsx

// app/layout.tsx  (server component)
import { Providers } from './emitwave-provider'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html><body><Providers>{children}</Providers></body></html>
  )
}

Hooks

Same hooks as @emitwave/react, usable in any client component.

app/live.tsx

'use client'
import { useConnection, useChannel, useEvent, usePresence } from '@emitwave/next'

export function Live() {
  const state = useConnection()
  const { data } = useChannel('orders', 'order.created')
  return <p>{state}: {JSON.stringify(data)}</p>
}

Use your application's public key via a NEXT_PUBLIC_… env var. Never put a server credential secret in client code or a NEXT_PUBLIC_ variable.

← Previous

React

Vue