Integration with Next.js

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

Setup

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

1. Install CometChat SDK using the following command

npm install @cometchat-pro/[email protected] --save

2. Include React UI Kit

git clone https://github.com/cometchat-pro/cometchat-pro-react-ui-kit.git -b v3
  • Copy the cloned repository to your pages folder
  • Copy all the dependencies from package.json into your project's package.js and install them

3. Build Chat component

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

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 {Chat}

🚧

Note

Replace APP_ID, REGION, and AUTH_KEY with your CometChat App ID and Region in the below code.

Create consts.js file with ComeChat details

module.exports = {
  APP_ID: "APP_ID",
  REGION: "REGION",
  AUTH_KEY: "AUTH_KEY"
}

Build CometChatNoSSR component in your pages folder

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 = "SUPERHERO1";
          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>);
        }
    }
}

4. Import images in your Next.js project

module.exports = ({
    webpack: (config, options) => {
        const { isServer } = options;
        config.module.rules.push({
            test: /\.(ogg|mp3|wav|mpe?g|png|jpe?g|gif|svg)$/i,
            exclude: config.exclude,
            use: [
                {
                    loader: require.resolve('file-loader'),
                    options: {
                        limit: config.inlineImageLimit,
                        publicPath: `_next/static/images/`,
                        outputPath: `${isServer ? '../' : ''}static/images/`,
                        name: '[name]-[hash].[ext]',
                        esModule: config.esModule || false,
                    },
                },
            ],
        });
        return config
    },
})

Did this page help you?