Next.js chat app components for messaging between users

Add chat to your Next.js app with a dynamic import

Install the TalkJS React components and the JavaScript Data API:

npm install @talkjs/react-components @talkjs/core

Put the chat in a Client Component of its own. This is the Chatbox from the Next.js getting started guide, showing a sample conversation from your test mode:

// app/messages/Chat.tsx
'use client';

import { Chatbox } from '@talkjs/react-components';
import '@talkjs/react-components/default.css';

export default function Chat() {
  return (
    <Chatbox
      style={{ width: '400px', height: '600px' }}
      appId="<APP_ID>"
      userId="sample_user_alice"
      conversationId="sample_conversation"
    />
  );
}

Then load it from a second, small Client Component with next/dynamic and ssr: false. Next.js doesn’t allow ssr: false in a Server Component (the build stops with “ssr: false is not allowed with next/dynamic in Server Components”), so your page imports the loader, not the chat:

// app/messages/ChatLoader.tsx
'use client';

import dynamic from 'next/dynamic';

const Chat = dynamic(() => import('./Chat'), { ssr: false });

export default function ChatLoader() {
  return <Chat />;
}

// app/messages/page.tsx (a Server Component)
import ChatLoader from './ChatLoader';

export default function MessagesPage() {
  return (
    <main>
      <h1>Messages</h1>
      <ChatLoader />
    </main>
  );
}

Why not render the chat straight from the page?

create-next-app 16.4.4 turns on Cache Components in next.config.ts. With it on, a page that renders the chat directly works in next dev, but next build stops with “did not produce a static shell and Next.js was unable to determine a reason”. Wrapping the chat in <Suspense> fixes the build, but the chat’s JavaScript still loads with the page. The loader above fixes both.

Search engines lose nothing either way: even rendered on the server, the chat is an empty container in the page’s HTML.

Next.js chat API: sign user tokens in a route handler

Before you go live, turn on authentication so that only your users can open their chats. Your server signs a token for the signed-in user, and the chat sends it when it connects. In the App Router that’s a Route Handler. This one uses jose to sign the token with the claims listed in the authentication docs:

// app/api/talkjs-token/route.ts
import { SignJWT } from 'jose';
import { getCurrentUserId } from '@/lib/auth'; // your own session lookup

export async function GET() {
  const userId = await getCurrentUserId();
  if (!userId) {
    return Response.json({ error: 'Not signed in' }, { status: 401 });
  }

  const secret = new TextEncoder().encode(process.env.TALKJS_SECRET_KEY);
  const token = await new SignJWT({ tokenType: 'user' })
    .setProtectedHeader({ alg: 'HS256' })
    .setIssuer(process.env.NEXT_PUBLIC_TALKJS_APP_ID!)
    .setSubject(userId)
    .setExpirationTime('1d')
    .sign(secret);

  return Response.json({ token });
}

Take the user ID from your session, never from the request, or anyone could ask for anyone’s token. In the chat component, fetch the token and register it before the chat mounts with getTalkSession({ appId, userId }).setToken(token). Then turn on Authentication (identity verification) in the security settings on the Settings page of your dashboard.