CODEWITHSUNDEEP
next.jssendbird
raj dhanani
raj dhanani

Reputation: 29

how to use sendbird-ui kit with next.js

I am trying to integrate https://codesandbox.io/s/3-3-customizing-channellist-sg9kx?file=/src/index.css:0-297 in my next.js project.

I am importing dependencies using:

import dynamic from 'next/dynamic'

const SBProvider = dynamic(
    () => {
        const { SendBirdProvider } = import('sendbird-uikit')
        return SendBirdProvider;
    },
    { ssr: false }
)


const withSendBird = dynamic(
    () => {
        const { withSendBird } = import('sendbird-uikit')
        return withSendBird;
    },
    { ssr: false }
)

as provided in the doc

but still getting this screen shot of the error

Upvotes: 0

Views: 832

Answers (2)

Jason Allshorn
Jason Allshorn

Reputation: 1625

I'm sorry to hear you are having a hard time. The code you are looking for would be something like this.

index.js

import dynamic from "next/dynamic";

const DynamicAppWithNoSSR = dynamic(() => import("../components/Chat"), {
  ssr: false,
  loading: () => <p>...</p>
});

const App = () => (
   <div>
      <DynamicAppWithNoSSR />
   </div>
);

export default App;

Then in Chat.jsx

import { App } from "sendbird-uikit";

export default () => (
   <div style={{ height: "95vh" }}>
      <App appId="/*your appID*/" userId="/*your userId*/" />
   </div>
);

You can find a working example here. If you have further questions please feel free to join our Sendbird Community. :)

Upvotes: 1

Walter Rodriguez
Walter Rodriguez

Reputation: 11

Try:

import dynamic from 'next/dynamic'

const DynamicUIKit = dynamic(() => import("sendbird-uikit"))

export default function Home() {
  return (
      <div>
        <DynamicUIKit appId="YOUR-APP-ID" userId="test1" />
      </div>
  )
}

You need to import the CSS (see below)

If you start by creating an application from here: https://nextjs.org/learn/basics/create-nextjs-app

Make sure it works. Then install the UIKit:

npm install sendbird-uikit --save

In your index.js

import { App as SendBirdApp } from "sendbird-uikit";
export default function Home() {
  return (
      <div>
        <SendBirdApp appId="YOUR-APP-ID" userId="ANY-USER-ID" />
      </div>
  )
}

You will have to create an _app.js in order to include this CSS:

import "sendbird-uikit/dist/index.css";

documentation

Upvotes: 0

Related Questions