> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-in-group-react-v6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Integration With Next.js

> Integration With Next.js — CometChat documentation.

Using React UI Kit, you can integrate your Next.js application with CometChat.

## Pre-requisites

#### First, if not already installed, add React and React DOM from your terminal using the following command.

<Tabs>
  <Tab title="CLI">
    ```sh theme={null}
    npm install react@17.0.2, react-dom@17.0.2
    ```
  </Tab>
</Tabs>

## Install CometChat SDK

use the following command

<Tabs>
  <Tab title="CLI">
    ```sh theme={null}
    npm install @cometchat-pro/chat@2.4.0 --save
    ```
  </Tab>
</Tabs>

## Include React UI Kit

<Tabs>
  <Tab title="CLI">
    ```sh theme={null}
    git clone https://github.com/cometchat-pro/cometchat-pro-react-ui-kit.git
    ```
  </Tab>
</Tabs>

* Copy the cloned repository to your **root** folder
* Copy all the dependencies from package.json into your project's package.js and install them

## Build Chat component

### Create *`chat.js`* file in your **pages** folder with the following code

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import dynamic from "next/dynamic";
    import { useEffect } from "react";

    const CometChatNoSSR = dynamic(
        () => import('./CometChatNoSSR'),
        { ssr: false }
    );

    function Chat() {

        useEffect(() => {
            window.CometChat = require('@cometchat-pro/chat').CometChat
        });

        return (
            <div><CometChatNoSSR /></div>
        )
    }

    export default Chat;
    ```
  </Tab>
</Tabs>

<Warning>
  Replace APP\_ID, REGION, and AUTH\_KEY with your CometChat App ID and Region in the below code.
</Warning>

### Create `consts.js` file with ComeChat details

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    module.exports = {
      APP_ID: "APP_ID",
      REGION: "REGION",
      AUTH_KEY: "AUTH_KEY"
    }
    ```
  </Tab>
</Tabs>

### Build `CometChatNoSSR` component in your **pages** folder

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import { Component } from "react";
    import consts from './consts';
    import { CometChatUI } from "./cometchat-pro-react-ui-kit/CometChatWorkspace/src/components/index"

    export default class CometChatNoSSR extends Component {
        constructor(props) {
            super(props);
            this.state = {
                user: undefined
            }
        }
        componentDidMount() {
          
          /**
          Initialize CometChat
          */
          let appSetting = new 	      CometChat.AppSettingsBuilder().subscribePresenceForAllUsers().setRegion(consts.REGION).build();
          CometChat.init(consts.APP_ID, appSetting).then(
            () => {
              
              /**
              *Log in user
              */
              const UID = "cometchat-uid-1";
              const authKey = consts.AUTH_KEY;
              CometChat.login(UID, authKey).then(
                user => {
                  this.setState({ user })
                },
                error => {
                  console.log("Login failed with exception:", {
                    error
                  });
                }
              );
            },
            error => {
              console.log("Initialization failed with error:", error);
              // Check the reason for error and take appropriate action.
            }
          );
        }
        render() {
            /**
            Rendering CometChatUI  component of React UIKit
            **/
            if (this.state.user) {
                return (
                    <div style={{ width: "100vw", height: "100vh" }}><CometChatUI /></div>
                );
            } else {
                return (<div>Laoding...</div>);
            }
        }
    }
    ```
  </Tab>
</Tabs>