> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Next.js Integration

> Next.js Integration — CometChat integration guide.

## Overview

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

### Pre-requisites

Please make sure you have a running Next.js app. Please follow the Next.js [Documentation](https://nextjs.org/docs/getting-started/installation) in case you do not have a Next.js app setup on your system.

### Install CometChat UI Kit

Please make sure you have installed the CometChat UI Kit by following the [Integration](/ui-kit/react/v4/getting-started) documentation.

### Build Chat component

Please make sure you have installed the CometChat UI Kit by following the [Integration](/ui-kit/react/v4/getting-started) documentation.

1. Let's create a new file named chat.js inside the pages folder. And add the following code in the file.

<Tabs>
  <Tab title="JavaScript">
    ```javascript 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/chat-sdk-javascript").CometChat;
      });

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

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

<Note>
  Replace APP\_ID, REGION, and AUTH\_KEY with your CometChat App ID, Region and Auth Key in the below code. You can get these details from the [CometChat Dashboard](https://app.cometchat.com/)
</Note>

2. Create a file named `**consts.js**` where will keep the CometChat App Credentials. Place this file in the pages folder as well. And add the below code in the file.

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

3. Now let us move to the most important part, rendering the CometChat UI Kit. Create a file named `**CometChatNoSSR.js**` component in your root folder

<Note>
  Replace UID in the below code.
</Note>

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    function CometChatNoSSR() {
      const [user, setUser] = useState(undefined);

      useEffect(() => {
        const UIKitSettings = new UIKitSettingsBuilder()
          .setAppId(consts.APP_ID)
          .setRegion(consts.REGION)
          .setAuthKey(consts.AUTH_KEY)
          .subscribePresenceForAllUsers()
          .build();

        CometChatUIKit.init(UIKitSettings)
          .then(() => {
            console.log("Initialization completed successfully");
            CometChatUIKit.getLoggedinUser().then((user) => {
              if (!user) {
                CometChatUIKit.login("UID", consts.AUTH_KEY)
                  .then((user) => {
                    console.log("Login Successful", { user });
                    setUser(user);
                  })
                  .catch((error) => {}, console.log);
              } else {
                console.log("Already logged-in", { user });
                setUser(user);
              }
            });
          })
          .catch((e) => {
            console.log(e);
          });
      }, []);

      return user ? (
        <div style={{ width: "95vw", height: "95vh" }}>
          <div style={{ height: "100%", width: "100%" }}>
            <CometChatConversationsWithMessages />
          </div>
        </div>
      ) : (
        <div>Loading...</div>
      );
    }
    export default CometChatNoSSR;
    ```
  </Tab>
</Tabs>

4. Now run the app using npm run dev & navigate to `localhost:3000/chat`. Change the port to the port on which the app is running.