Next.js
Build any chat use case into your Next.js app
Quickly embed a customizable chat experience into your Next.js app using the best chat APIs, feature-rich SDKs, and a highly customizable pre-built UI.
.message {
white-space: normal;
overflow: hidden;
border-radius: 0.75rem;
border-width: 1px;
border-style: solid;
word-wrap: break-word;
position: relative;
display: inline-block;
max-width: calc(100% - 6rem - 0.25rem - 0.25rem);
border-color: #F2F2F2;
background-color: #F2F2F2;
color: #171717;
}
.has-avatar-spacer .message {
max-width: calc(100% - 3rem - 0.25rem - 0.25rem);
}
.by-me .message {
border-color: #171717;
background-color: #171717;
color: #fff;
margin-right: 0.50rem;
}
Connect users with a fully customizable chat using TalkJS's real-time messaging infrastructure that works great with your Next.js backend.
Ship faster by using pre-built components that are highly customizable. Get up and running in 10 minutes.
All the essential messaging features you need. Replies, mentions, typing indicators, link previews, emojis, and more.
TalkJS works great with Next.js
TalkJS React components run in the browser and add a pre-built chat UI to your Next.js app. You can ship faster, simplify your stack, and save on development costs by using the best chat APIs and a feature-rich JavaScript SDK. It's all you need to add a fully-featured chat into your Next.js app in minutes instead of months.
'use client';
import { Chatbox } from '@talkjs/react-components';
import '@talkjs/react-components/default.css';
export default function Chat() {
return (
<Chatbox
appId="<APP_ID>"
userId="sample_user_alice"
conversationId="sample_conversation"
/>
);
}
We were able to offload all messaging to TalkJS — hugely simplifying our development of an otherwise complex stack.
Ready-made chat UI you can customize
The chat UI comes with three different layouts—that are highly customizable—which you can mix and match to suit your needs. You have complete control over the styling, the layout, and document structure of the chat messages and the possibility to show metadata.
The TalkJS Inbox shows the chat history on the left, selected conversation on the right. It's designed to act as the messaging center of your app, usually living on its own page.
The TalkJS Chatbox is the right half of the Inbox UI mode. It takes up less space and is designed to be embedded in your app near an order confirmation, a booking, or user profile.
You can also show a conversation in a popup that only shows up when the user clicks a button somewhere. When shown, the popup is positioned on the bottom right of your page.
FAQs
TalkJS adds chat to Next.js apps with pre-built React UI components on top of a hosted real-time messaging backend. Install @talkjs/react-components and @talkjs/core, render a Chatbox, Inbox or ConversationList in a Client Component, and TalkJS handles message delivery and storage. The same components work for 1-on-1, group and AI chat.
Yes. TalkJS runs in the browser, so put the chat in a Client Component by adding 'use client' at the top of the file. You can then render that component from any page or layout, including Server Components. See the Next.js getting started guide.
Yes. In the browser, the React components render the chat UI, and the JavaScript Data API (@talkjs/core) creates users and conversations. On your server, for example in a Next.js route handler, the TalkJS REST API syncs users and conversations and sends messages.
It depends on whether you want to run the backend yourself. TalkJS is a good fit if you want pre-built chat UI on a hosted real-time backend: Chatbox, Inbox and ConversationList components that you theme, with no WebSocket server to run. Open-source UI components give you the markup, but you still build storage and real-time delivery. See how TalkJS compares with Stream.
Yes. Each component takes props: for example, chatHeaderVisible={false} hides the chat header. For more control, the TalkJS theme system lets you change the styles, markup and behavior of the whole chat UI. See the customization guide.
Connect your own AI agent with webhooks and the REST API. A webhook notifies your server when a user sends a message, your agent generates a reply, and the REST API sends it back into the conversation. TalkJS doesn't include its own AI agent, so you choose the model.
Your backend generates a token for each user. Register it with getTalkSession({ appId, userId }).setToken(token) before you render any components. Then enable Authentication (identity verification) in the security settings of your TalkJS dashboard, so only users with a valid token can connect.
TalkJS is free in development mode with full feature access. You only need a paid plan once you go live with real users. See Pricing for details.
Yes. Paste “Add TalkJS chat to my app: talkjs.com/SKILL.md” into your coding agent. Or follow the Next.js getting started guide to set it up yourself.