skills.rest
MAX5271
MAX5271COMMUNITY
Explore all skills by this author →
GitHub

cometchat-nextjs-patterns

Integrate CometChat React UI Kit in Next.js with client-only rendering.

Updated May 28, 2026
Search Tags:#nextjs#app router#pages router#cometchat#react client components#ssr prevention#auth token api routes
One-click install
npx skills add https://github.com/MAX5271/CometChat --skill cometchat-nextjs-patterns-max5271
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cometchat-nextjs-patterns
Source: https://github.com/MAX5271/CometChat/tree/main/.claude/skills/cometchat-nextjs-patterns
Command: npx skills add https://github.com/MAX5271/CometChat --skill cometchat-nextjs-patterns-max5271

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents the most common Next.js integration failures when using CometChat’s React UI Kit, especially crashes caused by Server-Side Rendering (SSR) and React Server/Client Component boundary mistakes.

Core Features & Use Cases

  • SSR prevention for CometChat imports: Ensures all files importing @cometchat/chat-uikit-react run only in the browser using "use client" or next/dynamic with ssr: false.
  • Next.js provider architecture: Provides a robust CometChatProvider pattern for App Router and Pages Router, including safeguards against double initialization/login in React StrictMode.
  • Correct route and UI placement: Shows where to put chat UI files in both App Router (app/.../page.tsx) and Pages Router (pages/...) and how to embed CometChat in pages, modals, and drawers without breaking SSR rules.
  • Production-ready token strategy: Covers server-side API route patterns to generate auth tokens without exposing secrets to the browser.

Quick Start

Update your Next.js chat components and provider to run only on the client by adding the required "use client" / ssr: false patterns, then mount the CometChatProvider in the appropriate Next.js layer (App Router layout.tsx or Pages Router _app.tsx) and create your chat route (e.g., /messages) using client-rendered CometChat UI.

Frequently Asked Questions about cometchat-nextjs-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prevent SSR crashes when importing CometChat in Next.js?▼

To prevent SSR crashes in Next.js, restrict CometChat imports to the browser by using `"use client"` or `next/dynamic` with `ssr: false`. This ensures files importing `@cometchat/chat-uikit-react` entirely bypass server-side rendering.

How do I set up CometChat providers in Next.js App Router without StrictMode double-init issues?▼

Set up CometChat providers in App Router by mounting `CometChatProvider` in `layout.tsx` using client-rendered dynamic imports. This pattern specifically safeguards against double initialization and login attempts triggered by React StrictMode.

What's the best way to generate CometChat auth tokens in Next.js without exposing secrets?▼

The best way to generate CometChat auth tokens securely is using server-side API routes. This production-ready strategy keeps your secrets entirely out of the client bundle by handling token generation exclusively on the server.

Does CometChat work with both Next.js App Router and Pages Router?▼

Yes, CometChat works with both Next.js App Router and Pages Router. Correct integration involves placing chat UI files in `app/.../page.tsx` or `pages/...` and embedding components via client-only rendering to respect SSR rules.

Why does my CometChat UI Kit break React Server Component boundaries in Next.js?▼

CometChat UI Kit breaks React Server Component boundaries because it requires browser APIs. Fix this rendering error by enforcing dynamic imports with `ssr: false` or applying the `"use client"` directive to isolate the chat components.

Where should I place CometChat chat components in my Next.js project structure?▼

Place CometChat chat components in dedicated routes like `/messages` using `app/.../page.tsx` for App Router or `pages/...` for Pages Router. Mount the UI within pages, modals, or drawers using client-rendered dynamic imports to prevent SSR errors.

Related Skills

Explore More Software Engineering Skills→
ali-masterali-master
8

orpc-nextjs

Integrate oRPC into Next.js App Router and Pages Router applications.

Community
Intermediate
cometchatcometchat
512

cometchat-flutter-conversations

Manage real-time chat conversation lists in Flutter with CometChat SDK and Bloc.

Official
Intermediate
MAX5271MAX5271

cometchat

Detect app frameworks and generate CometChat integration code.

Community
Advanced
cometchatcometchat
74

cometchat-components

Catalog CometChat React UI Kit v6 components with imports and usage patterns.

Official
Intermediate