{"id":"50b9cb5d-92b2-44e6-81f9-8d01a0e42bdd","shortId":"m4ATTL","kind":"skill","title":"cometchat-nextjs-patterns","tagline":"Framework-specific patterns for integrating CometChat React UI Kit v6 into Next.js projects (App Router and Pages Router). Covers SSR prevention, provider setup, route placement, API routes, and common pitfalls.","description":"## Purpose\n\nThis skill teaches Claude how to integrate CometChat into a Next.js project. Next.js is the most complex framework to integrate with because of Server-Side Rendering (SSR) and the Server Component / Client Component boundary. Every CometChat component is browser-only -- getting this wrong is the #1 source of integration failures.\n\n**Read these companion skills first:**\n- `cometchat-core` -- initialization, login, CSS, provider pattern, anti-patterns\n- `cometchat-components` -- component catalog and composition patterns\n- `cometchat-placement` -- WHERE to put chat (route, modal, drawer, embedded)\n\nThis skill covers the HOW for Next.js specifically.\n\n---\n\n## 1. Project detection\n\nA project uses Next.js when `package.json` has `next` as a dependency.\n\n### Detecting App Router vs Pages Router\n\nBoth may coexist in a project. Check which is primary:\n\n```bash\n# App Router: look for app/ directory with layout.tsx\nls app/layout.tsx app/layout.jsx 2>/dev/null\n\n# Pages Router: look for pages/ directory with _app.tsx\nls pages/_app.tsx pages/_app.jsx pages/_app.js 2>/dev/null\n```\n\n**If `app/layout.tsx` exists, treat the project as App Router.** Even if `pages/` also exists, App Router is the primary routing mechanism in modern Next.js.\n\n**If only `pages/` exists, treat the project as Pages Router.**\n\n---\n\n## 2. Critical: SSR prevention\n\n**Every file that imports from `@cometchat/chat-uikit-react` MUST prevent server-side rendering.** CometChat components access `window`, `document`, and WebSocket APIs during import -- not just during render, but at import time. If Next.js tries to import these modules on the server, the build crashes with `ReferenceError: window is not defined`.\n\n### App Router: \"use client\" directive\n\nAdd `\"use client\"` as the FIRST line of every file that imports CometChat:\n\n```tsx\n\"use client\";\n\nimport { CometChatConversations } from \"@cometchat/chat-uikit-react\";\n// This file only runs in the browser\n```\n\n**Common mistake:** Putting `\"use client\"` AFTER imports. It must be the very first line, before any import statements.\n\n```tsx\n// WRONG -- \"use client\" is not the first line\nimport React from \"react\";\n\"use client\"; // too late, has no effect\n\n// CORRECT\n\"use client\";\nimport React from \"react\";\n```\n\n### App Router: dynamic import from Server Components\n\nIf you need to render a CometChat component inside a Server Component (e.g., a page that does data fetching), use `next/dynamic` with `ssr: false`:\n\n```tsx\n// app/messages/page.tsx (this is a Server Component)\nimport dynamic from \"next/dynamic\";\n\nconst ChatView = dynamic(() => import(\"../../components/ChatView\"), {\n ssr: false,\n loading: () =>
Loading chat...
,\n});\n\nexport default function MessagesPage() {\n return ;\n}\n```\n\nThe `ChatView` component itself must still have `\"use client\"` at the top.\n\n### Pages Router: dynamic import\n\nIn the Pages Router, every page can potentially run on the server. Use `next/dynamic`:\n\n```tsx\n// pages/messages.tsx\nimport dynamic from \"next/dynamic\";\n\nconst ChatView = dynamic(() => import(\"../components/ChatView\"), {\n ssr: false,\n loading: () =>
Loading chat...
,\n});\n\nexport default function MessagesPage() {\n return ;\n}\n```\n\n---\n\n## 3. CometChatProvider for Next.js (App Router)\n\n### Full implementation\n\n```tsx\n// app/providers/CometChatProvider.tsx\n\"use client\";\n\nimport React, { useEffect, useState, createContext, useContext } from \"react\";\nimport { CometChatUIKit, UIKitSettingsBuilder } from \"@cometchat/chat-uikit-react\";\n\ninterface CometChatContextValue {\n isReady: boolean;\n error: string | null;\n}\n\nconst CometChatContext = createContext({\n isReady: false,\n error: null,\n});\n\nexport const useCometChat = () => useContext(CometChatContext);\n\n// Module-level state prevents both double-init AND double-login in React\n// StrictMode. Without the loginInFlight guard, a second mount calls\n// login() while the first is still pending and the SDK throws\n// \"Please wait until the previous login request ends.\"\nlet initialized = false;\nlet loginInFlight: Promise | null = null;\n\nasync function ensureLoggedIn(\n uid: string,\n authToken?: string,\n): Promise {\n const existing = await CometChatUIKit.getLoggedinUser();\n if (existing) return;\n if (loginInFlight) {\n await loginInFlight;\n return;\n }\n loginInFlight = authToken\n ? CometChatUIKit.loginWithAuthToken(authToken)\n : CometChatUIKit.login(uid);\n try {\n await loginInFlight;\n } finally {\n loginInFlight = null;\n }\n}\n\ninterface CometChatProviderProps {\n children: React.ReactNode;\n}\n\nexport function CometChatProvider({ children }: CometChatProviderProps) {\n const [isReady, setIsReady] = useState(false);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n async function setup() {\n try {\n if (!initialized) {\n initialized = true;\n\n const settings = new UIKitSettingsBuilder()\n .setAppId(process.env.NEXT_PUBLIC_COMETCHAT_APP_ID!)\n .setRegion(process.env.NEXT_PUBLIC_COMETCHAT_REGION!)\n .setAuthKey(process.env.NEXT_PUBLIC_COMETCHAT_AUTH_KEY!)\n .subscribePresenceForAllUsers()\n .build();\n\n await CometChatUIKit.init(settings);\n }\n\n await ensureLoggedIn(\"cometchat-uid-1\"); // DEVELOPMENT ONLY — see cometchat-production skill\n\n setIsReady(true);\n } catch (e) {\n setError(String(e));\n }\n }\n\n setup();\n }, []);\n\n if (error) {\n return (\n
\n CometChat Error: {error}\n
\n );\n }\n\n if (!isReady) return null;\n\n return (\n \n {children}\n \n );\n}\n```\n\n### Where to mount: Option A -- Global (chat available everywhere)\n\nWrap the entire app in `app/layout.tsx`. The layout itself is a Server Component, but the provider is a Client Component via `\"use client\"` in its file:\n\n```tsx\n// app/layout.tsx (Server Component)\nimport { CometChatProvider } from \"./providers/CometChatProvider\";\nimport \"./globals.css\";\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n return (\n \n \n \n {children}\n \n \n \n );\n}\n```\n\n**Note:** Importing a `\"use client\"` component from a Server Component is fine. Next.js renders the Server Component on the server and defers the Client Component to the browser. The `CometChatProvider` only runs its `useEffect` (and init) in the browser.\n\n### Where to mount: Option B -- Scoped (chat only on chat routes)\n\nUse a route group to scope the provider to chat-related routes:\n\n```\napp/\n layout.tsx <-- no CometChat here\n page.tsx <-- home page, no chat overhead\n (chat)/\n layout.tsx <-- CometChatProvider wraps only this group\n messages/\n page.tsx <-- chat page\n inbox/\n page.tsx <-- another chat page\n```\n\n```tsx\n// app/(chat)/layout.tsx\nimport { CometChatProvider } from \"../providers/CometChatProvider\";\n\nexport default function ChatLayout({ children }: { children: React.ReactNode }) {\n return {children};\n}\n```\n\nOption B is better for performance: CometChat's SDK and WebSocket connection are only loaded when the user visits a chat route. Option A is simpler and ensures incoming call notifications work everywhere.\n\n---\n\n## 4. CometChatProvider for Next.js (Pages Router)\n\nIn the Pages Router, mount the provider in `_app.tsx`. Use dynamic import to prevent SSR:\n\n```tsx\n// pages/_app.tsx\nimport type { AppProps } from \"next/app\";\nimport dynamic from \"next/dynamic\";\nimport \"../styles/globals.css\";\n\nconst CometChatProvider = dynamic(\n () => import(\"../components/CometChatProvider\").then((mod) => mod.CometChatProvider),\n { ssr: false }\n);\n\nexport default function App({ Component, pageProps }: AppProps) {\n return (\n \n \n \n );\n}\n```\n\nThe provider implementation is the same as section 3, but the file lives at `components/CometChatProvider.tsx` (no `\"use client\"` needed in Pages Router -- `ssr: false` handles SSR prevention).\n\n---\n\n## 5. Route placement (App Router)\n\nNext.js App Router uses file-system routing. Creating a file at the right path automatically creates the route.\n\n### Create the chat page\n\n```tsx\n// app/messages/page.tsx\n\"use client\";\n\nimport { useState } from \"react\";\nimport {\n CometChatConversations,\n CometChatMessageHeader,\n CometChatMessageList,\n CometChatMessageComposer,\n} from \"@cometchat/chat-uikit-react\";\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\n\nexport default function MessagesPage() {\n const [selectedUser, setSelectedUser] = useState();\n const [selectedGroup, setSelectedGroup] = useState();\n\n function handleConversationClick(conversation: CometChat.Conversation) {\n const entity = conversation.getConversationWith();\n if (entity instanceof CometChat.User) {\n setSelectedUser(entity);\n setSelectedGroup(undefined);\n } else if (entity instanceof CometChat.Group) {\n setSelectedUser(undefined);\n setSelectedGroup(entity);\n }\n }\n\n return (\n
\n
\n \n
\n
\n {(selectedUser || selectedGroup) ? (\n <>\n {selectedUser && }\n {selectedGroup && }\n {selectedUser && }\n {selectedGroup && }\n {selectedUser && }\n {selectedGroup && }\n \n ) : (\n
\n Select a conversation to start chatting\n
\n )}\n
\n
\n );\n}\n```\n\nThis page is accessible at `/messages`. No router configuration needed -- Next.js handles it via the file system.\n\n### Add a navigation link\n\nFind the layout's nav component and add a link:\n\n```tsx\nimport Link from \"next/link\";\n\n// In the nav, alongside existing links:\nMessages\n```\n\n**Important:** Use Next.js's `` component (from `next/link`), not a plain `` tag or React Router's ``. Next.js's Link handles client-side navigation and prefetching.\n\n---\n\n## 6. Route placement (Pages Router)\n\n### Create the chat page\n\n```tsx\n// pages/messages.tsx\nimport dynamic from \"next/dynamic\";\n\nconst ChatView = dynamic(() => import(\"../components/ChatView\"), {\n ssr: false,\n loading: () => (\n
\n Loading chat...\n
\n ),\n});\n\nexport default function MessagesPage() {\n return ;\n}\n```\n\nThe `ChatView` component contains the actual CometChat composition (see `cometchat-placement` for patterns). It is dynamically imported with `ssr: false` to prevent server rendering.\n\n### ChatView implementation\n\n```tsx\n// components/ChatView.tsx\nimport { useState } from \"react\";\nimport {\n CometChatConversations,\n CometChatMessageHeader,\n CometChatMessageList,\n CometChatMessageComposer,\n} from \"@cometchat/chat-uikit-react\";\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\n\nexport default function ChatView() {\n const [selectedUser, setSelectedUser] = useState();\n const [selectedGroup, setSelectedGroup] = useState();\n\n function handleConversationClick(conversation: CometChat.Conversation) {\n const entity = conversation.getConversationWith();\n if (entity instanceof CometChat.User) {\n setSelectedUser(entity);\n setSelectedGroup(undefined);\n } else if (entity instanceof CometChat.Group) {\n setSelectedUser(undefined);\n setSelectedGroup(entity);\n }\n }\n\n return (\n
\n
\n \n
\n
\n {selectedUser && (\n <>\n \n \n \n \n )}\n {selectedGroup && (\n <>\n \n \n \n \n )}\n
\n
\n );\n}\n```\n\n---\n\n## 7. Modal/drawer placement\n\n### App Router\n\nCreate a Client Component for the drawer:\n\n```tsx\n// components/ChatDrawer.tsx\n\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport {\n CometChatMessageHeader,\n CometChatMessageList,\n CometChatMessageComposer,\n} from \"@cometchat/chat-uikit-react\";\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\n\ninterface ChatDrawerProps {\n isOpen: boolean;\n onClose: () => void;\n targetUserId?: string;\n}\n\nexport function ChatDrawer({ isOpen, onClose, targetUserId }: ChatDrawerProps) {\n const [user, setUser] = useState();\n\n useEffect(() => {\n if (!isOpen || !targetUserId) return;\n CometChat.getUser(targetUserId).then(setUser);\n }, [isOpen, targetUserId]);\n\n if (!isOpen) return null;\n\n return (\n <>\n
\n
\n
\n Chat\n \n
\n {user && (\n <>\n \n
\n \n
\n \n \n )}\n
\n \n );\n}\n```\n\n**Mounting the drawer:** The drawer component has `\"use client\"`, so it can be imported from either Server or Client Components. Import it in the layout or any page:\n\n```tsx\n// In a Server Component layout -- this works because ChatDrawer is \"use client\"\nimport { ChatDrawer } from \"../components/ChatDrawer\";\n\n// But state management (isOpen) must be in a Client Component.\n// Option 1: wrap in a small client component\n// Option 2: use a client-side context for drawer state\n```\n\nFor state lifting across the Server/Client boundary, create a small Client Component wrapper:\n\n```tsx\n// components/ChatDrawerTrigger.tsx\n\"use client\";\n\nimport { useState } from \"react\";\nimport { ChatDrawer } from \"./ChatDrawer\";\n\nexport function ChatDrawerTrigger({ targetUserId }: { targetUserId: string }) {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n <>\n \n setIsOpen(false)} targetUserId={targetUserId} />\n \n );\n}\n```\n\n### Pages Router\n\nUse `dynamic` import for the drawer/modal component:\n\n```tsx\nimport dynamic from \"next/dynamic\";\n\nconst ChatDrawer = dynamic(() => import(\"../components/ChatDrawer\").then(m => m.ChatDrawer), {\n ssr: false,\n});\n```\n\nSee `cometchat-placement` for complete modal and drawer implementations.\n\n---\n\n## 8. API route for production auth\n\nNext.js can serve as both frontend and backend. Use an API route to generate CometChat auth tokens server-side.\n\n### App Router API route\n\n```tsx\n// app/api/cometchat-token/route.ts\nimport { NextRequest, NextResponse } from \"next/server\";\n\nconst COMETCHAT_APP_ID = process.env.COMETCHAT_APP_ID!; // server-only, no NEXT_PUBLIC_ prefix\nconst COMETCHAT_REGION = process.env.COMETCHAT_REGION!; // server-only\nconst COMETCHAT_AUTH_TOKEN = process.env.COMETCHAT_AUTH_TOKEN!; // server-only secret\n\nexport async function POST(request: NextRequest) {\n try {\n const { uid } = await request.json();\n\n if (!uid || typeof uid !== \"string\") {\n return NextResponse.json({ error: \"uid is required\" }, { status: 400 });\n }\n\n const response = await fetch(\n `https://${COMETCHAT_APP_ID}.api-${COMETCHAT_REGION}.cometchat.io/v3/users/${uid}/auth_tokens`,\n {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n apiKey: COMETCHAT_AUTH_TOKEN,\n appId: COMETCHAT_APP_ID,\n },\n body: JSON.stringify({}),\n }\n );\n\n if (!response.ok) {\n const error = await response.text();\n return NextResponse.json({ error }, { status: response.status });\n }\n\n const data = await response.json();\n return NextResponse.json({ token: data.data.authToken });\n } catch (error) {\n return NextResponse.json({ error: String(error) }, { status: 500 });\n }\n}\n```\n\n### Pages Router API route\n\n```tsx\n// pages/api/cometchat-token.ts\nimport type { NextApiRequest, NextApiResponse } from \"next\";\n\nconst COMETCHAT_APP_ID = process.env.COMETCHAT_APP_ID!;\nconst COMETCHAT_REGION = process.env.COMETCHAT_REGION!;\nconst COMETCHAT_AUTH_TOKEN = process.env.COMETCHAT_AUTH_TOKEN!;\n\nexport default async function handler(req: NextApiRequest, res: NextApiResponse) {\n if (req.method !== \"POST\") {\n return res.status(405).json({ error: \"Method not allowed\" });\n }\n\n try {\n const { uid } = req.body;\n\n if (!uid || typeof uid !== \"string\") {\n return res.status(400).json({ error: \"uid is required\" });\n }\n\n const response = await fetch(\n `https://${COMETCHAT_APP_ID}.api-${COMETCHAT_REGION}.cometchat.io/v3/users/${uid}/auth_tokens`,\n {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n apiKey: COMETCHAT_AUTH_TOKEN,\n appId: COMETCHAT_APP_ID,\n },\n body: JSON.stringify({}),\n }\n );\n\n if (!response.ok) {\n const error = await response.text();\n return res.status(response.status).json({ error });\n }\n\n const data = await response.json();\n return res.status(200).json({ token: data.data.authToken });\n } catch (error) {\n return res.status(500).json({ error: String(error) });\n }\n}\n```\n\n### Environment variables for the API route\n\nAdd server-only variables to `.env.local` (no `NEXT_PUBLIC_` prefix -- these must NOT be exposed to the browser):\n\n```env\n# .env.local -- server-only (no NEXT_PUBLIC_ prefix)\nCOMETCHAT_APP_ID=your_app_id\nCOMETCHAT_REGION=us\nCOMETCHAT_AUTH_TOKEN=your_server_auth_token\n\n# Client-side (NEXT_PUBLIC_ prefix)\nNEXT_PUBLIC_COMETCHAT_APP_ID=your_app_id\nNEXT_PUBLIC_COMETCHAT_REGION=us\nNEXT_PUBLIC_COMETCHAT_AUTH_KEY=your_client_auth_key\n```\n\n**Note:** `COMETCHAT_AUTH_TOKEN` (server secret) and `COMETCHAT_AUTH_KEY` (client key) are different values from the CometChat dashboard. The auth token has higher privileges. Never prefix it with `NEXT_PUBLIC_`.\n\n---\n\n## 9. Environment variables\n\n### Next.js env var conventions\n\n| Variable | Prefix | Accessible from | File |\n|---|---|---|---|\n| Client-side vars | `NEXT_PUBLIC_` | Browser + Server | `.env.local` |\n| Server-only vars | None | Server only (API routes, Server Components) | `.env.local` |\n\n### .env.local file\n\n```env\nNEXT_PUBLIC_COMETCHAT_APP_ID=your_app_id\nNEXT_PUBLIC_COMETCHAT_REGION=us\nNEXT_PUBLIC_COMETCHAT_AUTH_KEY=your_auth_key\n```\n\n**Access in client code:** `process.env.NEXT_PUBLIC_COMETCHAT_APP_ID`\n\n**Important:** `.env.local` is gitignored by default in Next.js. Unlike Vite, you do not need to manually add it to `.gitignore`.\n\n---\n\n## 10. CSS import\n\n### App Router\n\nImport in `app/globals.css` or `app/layout.tsx`:\n\n```css\n/* app/globals.css */\n@import \"@cometchat/chat-uikit-react/css-variables.css\";\n\n/* your styles below */\n```\n\nOr as a JS import in the root layout:\n\n```tsx\n// app/layout.tsx\nimport \"@cometchat/chat-uikit-react/css-variables.css\";\nimport \"./globals.css\";\n```\n\n### Pages Router\n\nImport in `pages/_app.tsx` or `styles/globals.css`:\n\n```tsx\n// pages/_app.tsx\nimport \"@cometchat/chat-uikit-react/css-variables.css\";\nimport \"../styles/globals.css\";\n```\n\n---\n\n## 11. Common pitfalls\n\n### Missing \"use client\"\n\n**Symptom:** `ReferenceError: window is not defined` or `ReferenceError: document is not defined` during build or at runtime.\n\n**Cause:** A file imports from `@cometchat/chat-uikit-react` without `\"use client\"` at the top. Next.js tries to render it on the server.\n\n**Fix:** Add `\"use client\"` as the first line of the file.\n\n### Server/client code mixing\n\n**Symptom:** Build errors about `next/headers`, `cookies()`, or `generateMetadata` in the same file as CometChat imports.\n\n**Cause:** Server-only APIs and client-only APIs cannot coexist in the same file. CometChat requires `\"use client\"`, but `next/headers` and `cookies()` are server-only.\n\n**Fix:** Split the file. Keep server logic in a Server Component; keep CometChat in a separate `\"use client\"` component that the Server Component imports.\n\n```tsx\n// app/messages/page.tsx (Server Component -- does data fetching)\nimport { cookies } from \"next/headers\";\nimport dynamic from \"next/dynamic\";\n\nconst ChatView = dynamic(() => import(\"../../components/ChatView\"), { ssr: false });\n\nexport default async function MessagesPage() {\n const session = cookies().get(\"session\"); // server-only\n if (!session) redirect(\"/login\");\n\n return ;\n}\n```\n\n### Image optimization\n\nCometChat renders avatars and media images via its own components. These do not conflict with `next/image`. Do not try to replace CometChat's internal images with `next/image` -- they are managed by the SDK.\n\n### Middleware\n\nCometChat has no middleware requirements. Do not add CometChat-related middleware. If the project has auth middleware (e.g., protecting routes), just ensure the chat route is behind the same auth as the rest of the app.\n\n### ISR/SSG pages with chat\n\nIf a page uses static generation (`generateStaticParams`) or ISR, you can still add chat. Wrap the CometChat components in a Client Component. The page's static HTML ships without chat, and the Client Component hydrates and renders chat in the browser:\n\n```tsx\n// app/products/[id]/page.tsx\nexport async function generateStaticParams() {\n // ... returns product IDs for static generation\n}\n\nexport default async function ProductPage({ params }: { params: { id: string } }) {\n const product = await getProduct(params.id);\n\n return (\n
\n

{product.name}

\n

{product.description}

\n {/* ChatPanel is \"use client\" -- renders only in the browser */}\n \n
\n );\n}\n```\n\n### Turbopack\n\nNext.js's Turbopack (dev mode with `next dev --turbo`) works with CometChat. No special configuration needed. If you encounter issues, fall back to the standard Webpack dev server (`next dev` without `--turbo`).\n\n### Pages Router: do NOT use CometChat from `getServerSideProps` / `getStaticProps` / `getInitialProps`\n\n**Symptom:** `ReferenceError: window is not defined` or cryptic SDK errors during `next build` or page rendering.\n\n**Cause:** The CometChat client SDK needs the browser (localStorage, WebSocket, etc.) and a logged-in user session. It cannot run inside `getServerSideProps`, `getStaticProps`, or `getInitialProps` — those execute on the Node.js server before the browser has hydrated.\n\n**Fix:** Do chat-related work in client components only. If you need to pre-seed a conversation from server data, pass just the primitive IDs (user UID, group GUID) as page props and let the client component fetch the CometChat entity on mount:\n\n```tsx\n// pages/products/[id].tsx — server-side data fetch, no CometChat\nexport async function getServerSideProps({ params }) {\n const product = await fetchProduct(params.id);\n return { props: { product } }; // pass sellerId as string, not a CometChat.User\n}\n\nexport default function ProductPage({ product }) {\n return (\n <>\n

{product.name}

\n {/* client component */}\n \n );\n}\n```\n\n### Pages Router: `_document.tsx` doesn't need CometChat changes\n\nIf the project has a custom `pages/_document.tsx` for font preloading or third-party SSR CSS injection, leave it alone. CometChat CSS variables are client-side only — they don't need `_document.tsx` integration. Mount the CSS import in `_app.tsx` as shown in section 10; `_document.tsx` is the wrong layer.\n\n---\n\n## 12. Complete integration checklist (App Router)\n\n1. Install packages: `npm install @cometchat/chat-uikit-react @cometchat/chat-sdk-javascript`\n2. Create `.env.local` with `NEXT_PUBLIC_COMETCHAT_APP_ID`, `NEXT_PUBLIC_COMETCHAT_REGION`, `NEXT_PUBLIC_COMETCHAT_AUTH_KEY`\n3. Import `@cometchat/chat-uikit-react/css-variables.css` in `app/globals.css`\n4. Create `app/providers/CometChatProvider.tsx` with `\"use client\"` (section 3)\n5. Mount `CometChatProvider` in `app/layout.tsx` wrapping `{children}`\n6. Create `app/messages/page.tsx` with `\"use client\"` (section 5)\n7. Add a `Messages` to the layout's nav\n8. Verify: `npm run build` should succeed without SSR errors\n\n## 13. Complete integration checklist (Pages Router)\n\n1. Install packages: `npm install @cometchat/chat-uikit-react @cometchat/chat-sdk-javascript`\n2. Create `.env.local` with `NEXT_PUBLIC_COMETCHAT_APP_ID`, `NEXT_PUBLIC_COMETCHAT_REGION`, `NEXT_PUBLIC_COMETCHAT_AUTH_KEY`\n3. Import `@cometchat/chat-uikit-react/css-variables.css` in `pages/_app.tsx`\n4. Create `components/CometChatProvider.tsx` (section 3 code, without `\"use client\"`)\n5. Dynamically import `CometChatProvider` in `pages/_app.tsx` with `ssr: false` (section 4)\n6. Create `pages/messages.tsx` with dynamic import (section 6)\n7. Add a `Messages` to the layout's nav\n8. Verify: `npm run build` should succeed without SSR errors","tags":["cometchat","nextjs","patterns","skills","agent-skills","ai-agent","chat","claude-code","cursor","messaging","react","react-native"],"capabilities":["skill","source-cometchat","skill-cometchat-nextjs-patterns","topic-agent-skills","topic-ai-agent","topic-chat","topic-claude-code","topic-cometchat","topic-cursor","topic-messaging","topic-nextjs","topic-react","topic-react-native","topic-ui-kit"],"categories":["cometchat-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/cometchat/cometchat-skills/cometchat-nextjs-patterns","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add cometchat/cometchat-skills","source_repo":"https://github.com/cometchat/cometchat-skills","install_from":"skills.sh"}},"qualityScore":"0.463","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 27 github stars · SKILL.md body (27,073 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:04:55.334Z","embedding":null,"createdAt":"2026-05-07T13:05:15.680Z","updatedAt":"2026-05-18T19:04:55.334Z","lastSeenAt":"2026-05-18T19:04:55.334Z","tsv":"'-4':1459 '/../components/chatview':400,2345 '/auth_tokens':1786,1914 '/chatdrawer':1618 '/components/chatdrawer':1564,1662 '/components/chatview':451,1209 '/components/cometchatprovider':922 '/dev/null':175,189 '/globals.css':734,2188 '/layout.tsx':837 '/login':2364 '/messages':1127 '/page.tsx':2487 '/providers/cometchatprovider':732,841 '/styles/globals.css':917,2201 '/v3/users/$':1784,1912 '0':1433,1438,1439,1440,1447,1449,1451,1461,1464,1465,1466 '0.15':1467 '0.3':1441 '1':84,132,650,1069,1107,1331,1509,1576,2775,2853 '10':2157,2763 '1000':1455 '100vh':1054,1222,1316 '11':2202 '12':2769 '12px':1481 '13':2847 '16':674 '1px':1060,1322,1483 '2':174,188,224,1584,2782,2860 '200':1949 '20px':1462 '3':462,946,2800,2812,2878,2887 '360px':1058,1320 '4':884,2805,2883,2902 '400':1771,1894 '400px':1453 '405':1877 '5':965,2813,2827,2892 '500':1831,1957 '6':1190,2820,2903,2910 '600':1489 '7':1360,2828,2911 '8':1678,2837,2920 '9':2071 '999':1115,1435 'access':242,1125,2080,2128 'across':1597 'actual':1235 'add':282,1139,1150,1968,2153,2246,2409,2455,2829,2912 'alignitem':1110,1217 'allow':1882 'alon':2738 'alongsid':1161 'also':202 'anoth':831 'anti':103 'anti-pattern':102 'api':31,247,1679,1694,1706,1779,1834,1907,1966,2099,2278,2283 'apikey':1794,1922 'app':19,147,163,167,197,204,277,354,466,627,702,807,835,931,968,971,1363,1704,1717,1720,1777,1800,1846,1849,1905,1928,1997,2000,2021,2024,2110,2113,2135,2160,2438,2773,2789,2867 'app.tsx':183,898,2758 'app/api/cometchat-token/route.ts':1709 'app/globals.css':2164,2168,2804 'app/layout.jsx':173 'app/layout.tsx':172,191,704,726,2166,2184,2817 'app/messages/page.tsx':386,994,2327,2822 'app/products':2485 'app/providers/cometchatprovider.tsx':471,2807 'appid':1798,1926 'application/json':1793,1921 'appprop':909,934 'async':557,611,1749,1865,2350,2489,2500,2680 'auth':638,1683,1699,1739,1742,1796,1858,1861,1924,2006,2010,2034,2038,2042,2048,2060,2123,2126,2418,2432,2798,2876 'authtoken':562,578,580 'automat':985 'avail':697 'avatar':2370 'await':567,574,584,642,645,1757,1774,1808,1817,1902,1936,1945,2509,2686 'b':787,852 'back':2549 'backend':1691 'background':1495 'backgroundcolor':1436,1456 'bash':162 'behind':2429 'better':854 'bodi':1802,1930 'boolean':490,1394 'border':1497 'borderbottom':1482 'borderright':1059,1321 'bottom':1450 'boundari':71,1600 'boxshadow':1458 'browser':77,308,771,782,1986,2089,2483,2523,2593,2620 'browser-on':76 'build':269,641,2221,2260,2582,2841,2924 'button':1491,1631 'call':529,880 'cannot':2284,2605 'catalog':109 'catch':660,1823,1953 'caus':2225,2274,2586 'center':1111,1113,1218,1220 'chang':2718 'chat':119,405,456,696,789,792,804,816,818,827,832,836,871,991,1121,1197,1224,1490,2426,2442,2456,2472,2480,2626 'chat-rel':803,2625 'chatdraw':1401,1557,1562,1616,1636,1659 'chatdrawerprop':1392,1405 'chatdrawertrigg':1621 'chatlayout':845 'chatpanel':2515,2524 'chatview':397,412,448,1206,1231,1255,1277,2342 'chatwithsel':2706 'check':158 'checklist':2772,2850 'children':591,596,689,739,740,743,846,847,850,2819 'claud':40 'client':69,280,284,297,313,330,341,349,419,473,717,721,748,767,955,996,1185,1367,1375,1528,1538,1560,1573,1581,1588,1604,1610,2013,2037,2050,2084,2130,2207,2233,2248,2281,2293,2319,2463,2475,2518,2589,2630,2660,2709,2744,2810,2825,2891 'client-on':2280 'client-sid':1184,1587,2012,2083,2743 'code':2131,2257,2888 'coexist':154,2285 'color':671,1114 'column':1073,1335,1471 'cometchat':2,11,44,73,95,106,114,240,294,367,626,632,637,648,655,677,810,857,1009,1236,1240,1271,1388,1670,1698,1716,1730,1738,1776,1780,1795,1799,1845,1852,1857,1904,1908,1923,1927,1996,2002,2005,2020,2028,2033,2041,2047,2057,2109,2117,2122,2134,2272,2290,2314,2368,2389,2402,2411,2459,2539,2565,2588,2664,2678,2717,2739,2788,2793,2797,2866,2871,2875 'cometchat-compon':105 'cometchat-cor':94 'cometchat-nextjs-pattern':1 'cometchat-plac':113,1239,1669 'cometchat-product':654 'cometchat-rel':2410 'cometchat-uid':647 'cometchat.conversation':1027,1289 'cometchat.getuser':1415 'cometchat.group':1043,1305 'cometchat.io':1783,1911 'cometchat.io/v3/users/$':1782,1910 'cometchat.user':1034,1296,2698 'cometchat/chat-sdk-javascript':1011,1273,1390,2781,2859 'cometchat/chat-uikit-react':233,301,486,1007,1269,1386,2230,2780,2858 'cometchat/chat-uikit-react/css-variables.css':2170,2186,2199,2802,2880 'cometchatcontext':495,505 'cometchatcontext.provider':685 'cometchatcontextvalu':488 'cometchatconvers':299,1002,1063,1264,1325 'cometchatmessagecompos':1005,1097,1101,1267,1345,1357,1384,1517 'cometchatmessagehead':1003,1077,1081,1265,1337,1349,1382,1503 'cometchatmessagelist':1004,1085,1091,1266,1340,1352,1383,1512 'cometchatprovid':463,595,730,773,820,839,885,919,2815,2895 'cometchatproviderprop':590,597 'cometchatuikit':483 'cometchatuikit.getloggedinuser':568 'cometchatuikit.init':643 'cometchatuikit.login':581 'cometchatuikit.loginwithauthtoken':579 'common':34,309,2203 'companion':91 'complet':1673,2770,2848 'complex':53 'compon':68,70,74,107,108,241,360,368,372,391,413,711,718,728,749,753,760,768,932,936,1148,1169,1232,1368,1525,1539,1552,1574,1582,1605,1652,2102,2312,2320,2324,2329,2377,2460,2464,2476,2631,2661,2710 'components/chatdrawer.tsx':1373 'components/chatdrawertrigger.tsx':1608 'components/chatview.tsx':1258 'components/cometchatprovider.tsx':952,2885 'composit':111,1237 'configur':1130,2542 'conflict':2381 'connect':862 'const':396,447,494,502,565,598,603,619,918,1016,1020,1028,1205,1278,1282,1290,1406,1625,1658,1715,1729,1737,1755,1772,1806,1815,1844,1851,1856,1884,1900,1934,1943,2341,2353,2507,2684 'contain':1233 'content':1791,1919 'content-typ':1790,1918 'context':1590 'convent':2077 'convers':1026,1118,1288,2641 'conversation.getconversationwith':1030,1292 'cooki':2264,2297,2334,2355 'core':96 'correct':347 'cover':24,126 'crash':270 'creat':978,986,989,1195,1365,1601,2783,2806,2821,2861,2884,2904 'createcontext':478,496 'critic':225 'cryptic':2577 'css':99,2158,2167,2734,2740,2755 'cursor':1499 'custom':2724 'dashboard':2058 'data':378,1816,1944,2331,2644,2675 'data.data.authtoken':1822,1952 'default':407,458,736,843,929,1013,1226,1275,1864,2142,2349,2499,2700 'defer':765 'defin':276,2213,2219,2575 'depend':145 'detect':134,146 'dev':2531,2535,2554,2557 'develop':651 'differ':2053 'direct':281 'directori':168,181 'display':1051,1070,1108,1215,1313,1332,1468,1474 'div':669,1049,1055,1066,1104,1213,1311,1317,1328,1426,1442,1472,1506 'document':244,2216 'document.tsx':2713,2751,2764 'doesn':2714 'doubl':513,517 'double-init':512 'double-login':516 'drawer':122,1371,1522,1524,1592,1676 'drawer/modal':1651 'dynam':356,393,398,425,444,449,900,913,920,1202,1207,1246,1647,1655,1660,2338,2343,2893,2907 'e':661,664 'e.g':373,2420 'eee':1062,1324,1485 'effect':346 'either':1535 'els':1039,1301 'embed':123 'encount':2546 'end':548 'ensur':878,2424 'ensureloggedin':559,646 'entir':701 'entiti':1029,1032,1036,1041,1047,1291,1294,1298,1303,1309,2665 'env':1987,2075,2106 'env.local':1974,1988,2091,2103,2104,2138,2784,2862 'environ':1962,2072 'error':491,499,604,667,678,679,688,1766,1807,1812,1824,1827,1829,1879,1896,1935,1942,1954,1959,1961,2261,2579,2846,2929 'etc':2596 'even':199 'everi':72,228,290,431 'everywher':698,883 'execut':2613 'exist':192,203,217,566,570,1162 'export':406,457,501,593,735,842,928,1012,1225,1274,1399,1619,1748,1863,2348,2488,2498,2679,2699 'expos':1983 'failur':88 'fall':2548 'fals':384,402,453,498,551,602,927,961,1211,1250,1629,1641,1667,2347,2900 'fetch':379,1775,1903,2332,2662,2676 'fetchproduct':2687 'fff':1457 'file':229,291,303,724,949,975,980,1137,2082,2105,2227,2255,2270,2289,2305 'file-system':974 'final':586 'find':1143 'fine':755 'first':93,287,321,334,533,2251 'fix':1431,1445,2245,2302,2623 'flex':1052,1068,1071,1106,1109,1216,1314,1330,1333,1469,1475,1508 'flexdirect':1072,1334,1470 'font':2727 'fontfamili':675 'fontweight':1488 'framework':6,54 'framework-specif':5 'frontend':1689 'full':468 'function':408,459,558,594,612,737,844,930,1014,1024,1227,1276,1286,1400,1620,1750,1866,2351,2490,2501,2681,2701 'generat':1697,2448,2497 'generatemetadata':2266 'generatestaticparam':2449,2491 'get':79,2356 'getinitialprop':2569,2611 'getproduct':2510 'getserversideprop':2567,2608,2682 'getstaticprop':2568,2609 'gitignor':2140,2156 'global':695 'group':797,824,1082,1092,1102,1350,1353,1358,2652 'guard':525 'guid':2653 'handl':962,1133,1183 'handleconversationclick':1025,1065,1287,1327 'handler':1867 'header':1789,1917 'height':1053,1221,1315 'hidden':1511 'hidereplyinthreadopt':1088,1094,1343,1355,1515 'higher':2063 'home':813 'html':2469 'hydrat':2477,2622 'id':628,1718,1721,1778,1801,1847,1850,1906,1929,1998,2001,2022,2025,2111,2114,2136,2486,2494,2505,2649,2670,2790,2868 'imag':2366,2373,2392 'implement':469,940,1256,1677 'import':231,249,256,262,293,298,315,325,336,350,357,392,399,426,443,450,474,482,729,733,745,838,901,907,912,916,921,997,1001,1008,1154,1165,1201,1208,1247,1259,1263,1270,1376,1381,1387,1533,1540,1561,1611,1615,1648,1654,1661,1710,1838,2137,2159,2162,2169,2178,2185,2187,2191,2198,2200,2228,2273,2325,2333,2337,2344,2756,2801,2879,2894,2908 'inbox':829 'incom':879 'init':514,779 'initi':97,550,616,617 'inject':2735 'inset':1432 'insid':369,2607 'instal':2776,2779,2854,2857 'instanceof':1033,1042,1295,1304 'integr':10,43,56,87,2752,2771,2849 'interfac':487,589,1391 'intern':2391 'isopen':1393,1402,1412,1419,1422,1568,1626,1637,1638 'isr':2451 'isr/ssg':2439 'isreadi':489,497,599,681,687 'issu':2547 'js':2177 'json':1878,1895,1941,1950,1958 'json.stringify':1803,1931 'justifycont':1112,1219,1476 'keep':2306,2313 'key':639,2035,2039,2049,2051,2124,2127,2799,2877 'kit':14 'late':343 'layer':2768 'layout':706,1145,1544,1553,2182,2834,2917 'layout.tsx':170,808,819 'leav':2736 'let':549,552,2658 'level':508 'lift':1596 'line':288,322,335,2252 'link':1142,1152,1155,1163,1182 'live':950 'load':403,404,454,455,865,1212,1223 'localstorag':2594 'log':2600 'logged-in':2599 'logic':2308 'login':98,518,530,546 'logininflight':524,553,573,575,577,585,587 'look':165,178 'ls':171,184 'm':1664 'm.chatdrawer':1665 'manag':1567,2397 'manual':2152 'may':153 'mechan':210 'media':2372 'messag':825,1164,1635,2831,2914 'messagespag':409,460,1015,1228,2352 'method':1787,1880,1915 'middlewar':2401,2405,2413,2419 'miss':2205 'mistak':310 'mix':2258 'mod':924 'mod.cometchatprovider':925 'modal':121,1674 'modal/drawer':1361 'mode':2532 'modern':212 'modul':264,507 'module-level':506 'monospac':676 'mount':528,692,785,894,1520,2667,2753,2814 'must':234,317,415,1569,1980 'nav':1147,1160,2836,2919 'navig':1141,1187 'need':363,956,1131,2150,2543,2591,2635,2716,2750 'never':2065 'new':621 'next':142,1726,1843,1976,1993,2015,2018,2026,2031,2069,2087,2107,2115,2120,2534,2556,2581,2786,2791,2795,2864,2869,2873 'next.js':17,47,49,130,138,213,259,465,756,887,970,1132,1167,1180,1684,2074,2144,2237,2528 'next/app':911 'next/dynamic':381,395,440,446,915,1204,1657,2340 'next/headers':2263,2295,2336 'next/image':2383,2394 'next/link':1157,1171 'next/server':1714 'nextapirequest':1840,1869 'nextapirespons':1841,1871 'nextj':3 'nextrequest':1711,1753 'nextrespons':1712 'nextresponse.json':1765,1811,1820,1826 'node.js':2616 'none':1496,1498,2096 'note':744,2040 'notif':881 'npm':2778,2839,2856,2922 'null':493,500,555,556,588,608,609,683,1424 'onclick':1427,1492,1632 'onclos':1395,1403,1428,1493,1639 'onitemclick':1064,1326 'optim':2367 'option':693,786,851,873,1575,1583 'overflow':1510 'overhead':817 'packag':2777,2855 'package.json':140 'pad':673,1480 'page':22,150,176,180,201,216,222,375,423,429,432,814,828,833,888,892,958,992,1123,1193,1198,1547,1644,1832,2189,2440,2445,2466,2560,2584,2655,2711,2851 'page.tsx':812,826,830 'pageprop':933,937 'pages/_app.js':187 'pages/_app.jsx':186 'pages/_app.tsx':185,906,2193,2197,2882,2897 'pages/_document.tsx':2725 'pages/api/cometchat-token.ts':1837 'pages/messages.tsx':442,1200,2905 'pages/products':2669 'param':2503,2504,2683 'params.id':2511,2688 'parti':2732 'pass':2645,2692 'path':984 'pattern':4,8,101,104,112,1243 'pend':536 'perform':856 'pitfal':35,2204 'placement':30,115,967,1192,1241,1362,1671 'plain':1174 'pleas':541 'pointer':1500 'posit':1430,1444 'post':1751,1788,1874,1916 'potenti':434 'pre':2638 'pre-se':2637 'prefetch':1189 'prefix':1728,1978,1995,2017,2066,2079 'preload':2728 'prevent':26,227,235,510,903,964,1252 'previous':545 'primari':161,208 'primit':2648 'privileg':2064 'process.env.cometchat':1719,1732,1741,1848,1854,1860 'process.env.next':624,630,635,2132 'product':656,1682,2493,2508,2685,2691,2703 'product.description':2514 'product.name':2513,2705 'product.sellerid':2526,2708 'productpag':2502,2702 'project':18,48,133,136,157,195,220,2416,2721 'promis':554,564 'prop':2656,2690 'protect':2421 'provid':27,100,714,801,896,939 'public':625,631,636,1727,1977,1994,2016,2019,2027,2032,2070,2088,2108,2116,2121,2133,2787,2792,2796,2865,2870,2874 'purpos':36 'put':118,311 'px':1460 'react':12,337,339,351,353,475,481,520,1000,1177,1262,1380,1614 'react.reactnode':592,741,848 'read':89 'red':672 'redirect':2363 'referenceerror':272,2209,2215,2571 'region':633,1731,1733,1781,1853,1855,1909,2003,2029,2118,2794,2872 'relat':805,2412,2627 'render':63,239,253,365,757,1254,2240,2369,2479,2519,2585 'replac':2388 'req':1868 'req.body':1886 'req.method':1873 'request':547,1752 'request.json':1758 'requir':1769,1899,2291,2406 'res':1870 'res.status':1876,1893,1939,1948,1956 'respons':1773,1901 'response.json':1818,1946 'response.ok':1805,1933 'response.status':1814,1940 'response.text':1809,1937 'rest':2435 'return':410,461,571,576,668,682,684,742,849,935,1048,1229,1310,1414,1423,1425,1630,1764,1810,1819,1825,1875,1892,1938,1947,1955,2365,2492,2512,2689,2704 'rgba':1437,1463 'right':983,1448 'root':2181 'rootlayout':738 'rout':29,32,120,209,793,796,806,872,966,977,988,1191,1680,1695,1707,1835,1967,2100,2422,2427 'router':20,23,148,151,164,177,198,205,223,278,355,424,430,467,889,893,959,969,972,1129,1178,1194,1364,1645,1705,1833,2161,2190,2561,2712,2774,2852 'run':305,435,775,2606,2840,2923 'runtim':2224 'scope':788,799 'sdk':539,859,2400,2578,2590 'second':527 'secret':1747,2045 'section':945,2762,2811,2826,2886,2901,2909 'see':653,1238,1668 'seed':2639 'select':1116 'selectedgroup':1021,1075,1080,1083,1090,1093,1100,1103,1283,1348,1351,1354,1359 'selectedus':1017,1074,1076,1079,1084,1087,1096,1099,1279,1336,1339,1342,1347 'sellerid':2693 'selleruid':2707 'separ':2317 'serv':1686 'server':61,67,237,267,359,371,390,438,710,727,752,759,763,1253,1536,1551,1702,1723,1735,1745,1970,1990,2009,2044,2090,2093,2097,2101,2244,2276,2300,2307,2311,2323,2328,2359,2555,2617,2643,2673 'server-on':1722,1734,1744,1969,1989,2092,2275,2299,2358 'server-sid':60,236,1701,2672 'server/client':1599,2256 'session':2354,2357,2362,2603 'set':620,644 'setappid':623 'setauthkey':634 'seterror':605,662 'setisopen':1627,1633,1640 'setisreadi':600,658 'setregion':629 'setselectedgroup':1022,1037,1046,1284,1299,1308 'setselectedus':1018,1035,1044,1280,1297,1306 'setup':28,613,665 'setus':1408,1418 'ship':2470 'shown':2760 'side':62,238,1186,1589,1703,2014,2085,2674,2745 'simpler':876 'skill':38,92,125,657 'skill-cometchat-nextjs-patterns' 'small':1580,1603 'solid':1061,1323,1484 'sourc':85 'source-cometchat' 'space':1478 'space-between':1477 'span':1486 'special':2541 'specif':7,131 'split':2303 'ssr':25,64,226,383,401,452,904,926,960,963,1210,1249,1666,2346,2733,2845,2899,2928 'standard':2552 'start':1120 'state':509,1566,1593,1595 'statement':326 'static':2447,2468,2496 'status':1770,1813,1830 'still':416,535,2454 'strictmod':521 'string':492,561,563,607,663,1398,1624,1763,1828,1891,1960,2506,2695 'style':670,1050,1056,1067,1105,1214,1312,1318,1329,1429,1443,1473,1487,1494,1507,2172 'styles/globals.css':2195 'subscribepresenceforallus':640 'succeed':2843,2926 'symptom':2208,2259,2570 'system':976,1138 'tag':1175 'targetuserid':1397,1404,1413,1416,1420,1622,1623,1642,1643,2525 'teach':39 'third':2731 'third-parti':2730 'throw':540 'time':257 'token':1700,1740,1743,1797,1821,1859,1862,1925,1951,2007,2011,2043,2061 'top':422,1446,2236 'topic-agent-skills' 'topic-ai-agent' 'topic-chat' 'topic-claude-code' 'topic-cometchat' 'topic-cursor' 'topic-messaging' 'topic-nextjs' 'topic-react' 'topic-react-native' 'topic-ui-kit' 'treat':193,218 'tri':260,583,614,1754,1883,2238,2386 'true':618,659,1089,1095,1344,1356,1516,1634 'tsx':295,327,385,441,470,725,834,905,993,1153,1199,1257,1372,1548,1607,1653,1708,1836,2183,2196,2326,2484,2668,2671 'turbo':2536,2559 'turbopack':2527,2530 'type':908,1792,1839,1920 'typeof':1761,1889 'ui':13 'uid':560,582,649,1756,1760,1762,1767,1785,1885,1888,1890,1897,1913,2651 'uikitsettingsbuild':484,622 'undefin':1038,1045,1300,1307 'unlik':2145 'us':2004,2030,2119 'use':137,279,283,296,312,329,340,348,380,418,439,472,720,747,794,899,954,973,995,1166,1374,1527,1559,1585,1609,1646,1692,2206,2232,2247,2292,2318,2446,2517,2564,2809,2824,2890 'usecometchat':503 'usecontext':479,504 'useeffect':476,610,777,1377,1410 'user':868,1078,1086,1098,1338,1341,1346,1407,1502,1504,1505,1513,1514,1518,1519,2602,2650 'usest':477,601,606,998,1019,1023,1260,1281,1285,1378,1409,1612,1628 'v6':15 'valu':686,2054 'var':2076,2086,2095 'variabl':1963,1972,2073,2078,2741 'verifi':2838,2921 'via':719,1135,2374 'visit':869 'vite':2146 'void':1396 'vs':149 'wait':542 'webpack':2553 'websocket':246,861,2595 'width':1057,1319,1452 'window':243,273,2210,2572 'without':522,2231,2471,2558,2844,2889,2927 'work':882,1555,2537,2628 'wrap':699,821,1577,2457,2818 'wrapper':1606 'wrong':81,328,2767 'x':1501 'zindex':1434,1454","prices":[{"id":"ab5abf63-6a44-4109-944e-8a214195535c","listingId":"50b9cb5d-92b2-44e6-81f9-8d01a0e42bdd","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"cometchat","category":"cometchat-skills","install_from":"skills.sh"},"createdAt":"2026-05-07T13:05:15.680Z"}],"sources":[{"listingId":"50b9cb5d-92b2-44e6-81f9-8d01a0e42bdd","source":"github","sourceId":"cometchat/cometchat-skills/cometchat-nextjs-patterns","sourceUrl":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-nextjs-patterns","isPrimary":false,"firstSeenAt":"2026-05-07T13:05:15.680Z","lastSeenAt":"2026-05-18T19:04:55.334Z"}],"details":{"listingId":"50b9cb5d-92b2-44e6-81f9-8d01a0e42bdd","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cometchat","slug":"cometchat-nextjs-patterns","github":{"repo":"cometchat/cometchat-skills","stars":27,"topics":["agent-skills","ai-agent","chat","claude-code","cometchat","cursor","messaging","nextjs","react","react-native","ui-kit"],"license":null,"html_url":"https://github.com/cometchat/cometchat-skills","pushed_at":"2026-05-18T05:04:24Z","description":"Add CometChat chat to any React, Next.js, React Native, Angular, Android, iOS, or Flutter project through your AI coding agent. Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and 50+ more agents.","skill_md_sha":"bf1727641d9d03174c5e70f9587efeb6f86e5c33","skill_md_path":"skills/cometchat-nextjs-patterns/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-nextjs-patterns"},"layout":"multi","source":"github","category":"cometchat-skills","frontmatter":{"name":"cometchat-nextjs-patterns","license":"MIT","description":"Framework-specific patterns for integrating CometChat React UI Kit v6 into Next.js projects (App Router and Pages Router). Covers SSR prevention, provider setup, route placement, API routes, and common pitfalls.","compatibility":"Node.js >=18; React >=18; Next.js >=13; @cometchat/chat-uikit-react ^6; @cometchat/chat-sdk-javascript ^4"},"skills_sh_url":"https://skills.sh/cometchat/cometchat-skills/cometchat-nextjs-patterns"},"updatedAt":"2026-05-18T19:04:55.334Z"}}