How to Build a Chat App With Next.js & Firebase

Building a Next.js chat app from scratch is a significant engineering undertaking. Beyond the initial UI challenges, you're looking at setting up WebSocket infrastructure for real-time message delivery, handling presence and typing indicators, managing authentication securely, persisting message history, and scaling all of it as your user base grows.

In a Next.js App Router project, the complexity compounds further — you have to carefully navigate the boundary between Server and Client Components just to get third-party real-time SDKs to load without crashing.

CometChat's React UI Kit sidesteps all of that. It ships prebuilt, production-ready components for conversations, message threads, and composition — designed to work in React and, with a few patterns covered in this tutorial, in Next.js too. By the end of this walkthrough, you'll have a working Next.js chat app with a conversation list and real-time message view, built entirely from CometChat components and ready to extend.

Why use CometChat instead of building it yourself?

What You'll Build

By the end of this tutorial you'll have a Next.js chat app that supports:

Prerequisites

Knowledge

Tools

Getting Started

Step 1: Create a New Next.js Application

Bootstrap a new Next.js project with TypeScript support using create-next-app:

Before adding anything, confirm the app runs:

Open local host and you should see the default Next.js welcome page. Once that's confirmed, move on.

Step 2: Create a CometChat App and Collect Your Credentials

You'll need three values from the CometChat Dashboard before writing any integration code. Here's how to get them,

You can create a Cometchat account by signing up here.

Step 3: Install the CometChat React UI Kit

Install the UI Kit package. It automatically pulls in @cometchat/chat-sdk-javascript as a dependency, so you don't need to install the SDK separately:

If you plan to add voice or video calling later, also install the calls SDK. This is optional for the core integration covered here:

Step 4: Store Your Credentials in .env.local

Create a .env.local file at the project root and add your CometChat credentials.

Prefix each variable with NEXT_PUBLIC_ so they are available in the browser bundle:

CometChat pre-creates five test users you can use during development: cometchat-uid-1 through cometchat-uid-5.

Important: Auth Key is for development/POC only. In production, generate Auth Tokens server-side via the REST API and use loginWithAuthToken() instead. Never ship Auth Keys in client-facing code.

Step 5: Add the CometChat CSS and Viewport Height Rules

Open src/app/globals.css and add the CometChat CSS variables import at the very top of the file:

Two things are happening here and both are required:

Step 6: Create the Sidebar Component (CometChatSelector)

Create two files:

CometChatSelector.tsx renders CometChatConversations (the conversation list) and fires a callback when the user taps a conversation. It also tracks which conversation is currently active so the list highlights it.

Use the CometChatSelector.css file to override sidebar styles using CometChat's CSS custom properties as needed (e.g. override sidebar widths, icon colours, menu positioning)

Step 7: Create the Main Chat Component (CometChatNoSSR)

Create two files:

This is the core component. It's responsible for three things:

CometChatNoSSR.tsx:

A few things worth noting about the init and login flow:

• init() must resolve before login() is called. If you call them out of order, you'll get a blank screen with no error.

• No CometChat components should render until login has resolved. The user state flag gates all rendering — notice that the component returns null until user is set.

• init() can return undefined in Next.js if your credentials are missing or malformed. Use optional chaining (?.then(...)) to handle this gracefully.

CometChatNoSSR.css:

Add the two-panel layout styles:

Step 8: Create a Client Component Loader (CometChatLoader)

Here's where Next.js App Router requires a specific pattern. Because page.tsx is a Server Component in the Next.js App Router, dynamic() with ssr: false must live inside a "use client" wrapper. Create:

Create src/app/CometChatLoader.tsx:

The ssr: false flag tells Next.js to skip server-side rendering for CometChatNoSSR entirely. This is necessary because the CometChat SDK accesses browser APIs (window, WebSocket) that are not available in the Node.js server environment.

Step 9: Update the Root Page

Replace the contents of src/app/page.tsx to render the loader:

The outer div with height: 100vh ensures the chat UI fills the full browser viewport, which works together with the height: 100% rules you added to globals.css in Step 5.

Step 10: Run the Project

Open the local host. You should see:

If the conversation list is empty, it means no conversations exist yet for your test user. You can send a message between two of the pre-created test UIDs from the CometChat Dashboard to populate it, or use the sample app (below) to generate some activity.

CometChat Next.js Sample App

The CometChat React UI Kit sample app is a hands-on way to explore the full range of CometChat's capabilities, with the it you can try components, test layouts, and see real-time messaging in action before extending your own integration.

Although it targets React directly (not Next.js), it uses the same @cometchat/chat-uikit-react package, making it an accurate reference for component usage, theming patterns, and feature configuration.

Running the Sample App

Clone the repository:

Navigate to the sample app directory:

Install dependencies:

Open the credentials file (typically src/AppConstants.ts) and enter your CometChat credentials:

Important: As with the main tutorial, the Auth Key here is for local development only. Do not deploy this configuration to a public environment.

Start the development server:

Open the local URL shown in your terminal and explore the full component library.

Closing thoughts

You've built a working Next.js chat app using CometChat's React UI Kit, without writing a single line of WebSocket logic, message persistence code, or real-time state management. The integration covered here is the foundation: a conversation sidebar connected to a live message view, authenticated with a CometChat user, and structured correctly for Next.js App Router.

From here, the natural next steps are adding voice and video calling (via @cometchat/calls-sdk-javascript), customizing the UI with CSS variables and component props, and swapping the Auth Key for server-generated Auth Tokens before going to production. The sample app is worth running if you want to see those capabilities in action before building them yourself.

Happy building!

Frequently Asked Questions (FAQ)

How long does it take to build a Next.js chat app with CometChat?

The core integration, a two-panel layout with a conversation list and real-time messaging takes under an hour following this tutorial. Customizing the UI, adding calling features, or wiring up your own auth system will take additional time depending on your requirements.

How much does it cost to build a Next.js chat app with CometChat?

CometChat offers a free tier suitable for development and small-scale apps. Paid plans scale with monthly active users (MAUs) and the features you need. See our pricing page for current plan details.

Can I customize the appearance of the chat UI?

Yes. CometChat's React UI Kit exposes CSS custom properties (e.g., --cometchat-primary-color, --cometchat-font-body-regular) that you can override globally or per-component. Most components also accept props for fine-grained control over icons, labels, and layout. The sample app demonstrates several theming patterns.

Is CometChat scalable? How many users can it handle?

CometChat's infrastructure is built to handle millions of concurrent users. Scaling is managed on CometChat's end, you don't need to provision servers or manage WebSocket connections as your user base grows.

Can I use this integration with the Next.js Pages Router instead of App Router?

Yes. The main difference is that you don't need the CometChatLoader wrapper, dynamic() with ssr: false can be used directly in a Pages Router page. The rest of the integration (init, login, component structure) remains the same.

Can I add voice and video calling to this Next.js chat app?

Yes. Install @cometchat/calls-sdk-javascript and use CometChat's CometChatCallButtons component to add call initiation to your message header. Full setup instructions are in the calling documentation.

Haris Kumar

Lead Content Strategist , CometChat

Haris brings nearly half a decade of expertise in B2B SaaS content marketing, where he excels at developing strategic content that drives engagement and supports business growth. His deep understanding of the SaaS landscape allows him to craft compelling narratives that resonate with target audiences. Outside of his professional pursuits, Haris enjoys reading, trying out new dishes and watching new movies!