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.

Try for free Talk to an expert

Thiago7mHey! Has anyone looked into using ChatGPT or other AI tools for our website marketing efforts? I'm curious about it.7m

Juliana2mNot that I'm aware of. Anyone got ideas?2m

Nadia2mCan it also be used for personalised product recommendations?2m

Manu1mYes it can. It can also be used to generate product descriptions and content for our site, social media, and email campaigns. It can even help with identifying high-performing marketing strategies.1m

Say something...

Hello, Magnus. Just a reminder, your dissertation deadline is this week. How are you coming along?

1m✓✓

Hi! I'm almost done, just finalizing edits and checking my citations.Just now

Great to hear! Anything you're worried about?

Just now✓✓

Just aiming to meet all the guidelines. I'll finish on time, I'm confident of that.Just now

If you need a review or have questions, let me know. Be sure to submit by the deadline.

Just now✓✓

Will do. Thanks for the support!Just now

Say something...

Next.js integration

Connect users with a fully customizable chat using our real-time messaging infrastructure that works great with Next.js.

Drop-in chat UI

Ship faster by using pre-built components that are highly customizable. Get up and running in just 10 minutes.

Fully-featured

All the essential messaging features you need. Replies, mentions, typing indicators, link previews, emojis, and more.

TalkJS works great with Next.js

Most of the TalkJS code will live in the frontend, so it seamlessly integrates with Next.js. 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.

Next.js integration tutorial


1<Session appId="t824ba8" userId="pete">
2  <Chatbox conversation="workshop" className="chatbox"/>
3</Session>

We were able to offload all messaging to TalkJS — hugely simplifying our development of an otherwise complex stack.

Deryk Wenaus

CTO, Retreat Guru

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.

Chat UI demo Chat UI customization

Inbox

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.

Read the Inbox docs

Chatbox

The Chatbox is just 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.

Read the Chatbox docs

Popup

You can also show a conversation in a React 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.

Read the Popup docs