TalkJS and Next.js Starter Kit

Next.js starter kit with a full-featured chat, real-time messaging and notifications, built by TalkJS.

Features

• Pre-built chat UIs:
  • Chatbox – A compact message window you can embed next to a booking, order, or user profile.
  • Inbox – A full messaging center, with sidebar and conversation view. Ideal for support or community messaging.
  • Popup – A floating chat window users can open on demand, shown in the bottom-right corner.
• Responsive layouts using Tailwind CSS
• Deploy to Vercel with one click.

Chat features

• Private and group chat
• Persistent message history
• Typing indicators
• Read receipts
• Mentions and emoji reactions
• Link previews
• Voice messages
• Message editing
• Custom UI and actions
• Notifications (in-app, push & email)
• Presence indicators
• Moderation tools
• Media and file sharing

Deploy to Vercel

1. Sign up or log in to talkjs.com, and copy the TalkJS App ID from the Settings page of your TalkJS dashboard.

2. Deploy this starter kit to Vercel:

3. When prompted, add your TalkJS App ID as a value for the environment variable NEXT_PUBLIC_TALKJS_APP_ID.

Running locally

1. Clone this repository

git clone https://github.com/talkjs/talkjs-nextjs-starter
cd talkjs-nextjs-starter

2. Install dependencies

npm install
# or
yarn install

3. Configure environment variables

Create an .env file based on the example:

cp .env.example .env

Sign up or log in to talkjs.com, and copy your TalkJS App ID from the Settings page of your dashboard.

In your .env file, replace <YOUR_APP_ID> with your own TalkJS App ID:

NEXT_PUBLIC_TALKJS_APP_ID="<YOUR_APP_ID>"

4. Run the development server

npm run dev
# or
yarn dev

5. View and edit

Open http://localhost:3000 to view the app in your browser.

You can start editing any page, and changes update automatically.

You can fully customize any aspect of the chat UI and functionality for the perfect in-app chat experience. Check out the TalkJS documentation to get started.

Learn more

To learn more, check out the following resources:

• TalkJS documentation to learn about TalkJS and how to customize your chat.
• Next.js documentation to learn about Next.js features.
• Deploying to Vercel to learn about deploying your app to Vercel.

Support

Need help? Or do you have any questions? TalkJS devs are happy to support. Get in touch.