Блог

Главная - Вопросы по программированию - как использовать sendbird-ui kit с next.js

как использовать sendbird-ui kit с next.js

#next.js #sendbird

#next.js #sendbird

Вопрос:

Я пытаюсь интегрировать https://codesandbox.io/s/3-3-customizing-channellist-sg9kx?file=/src/index.css:0-297 в моем next.js проект.

Я импортирую зависимости, используя:

 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 }
)

как указано в документе

но все равно получаю этот снимок экрана с ошибкой

Ответ №1:

Мне жаль слышать, что у вас трудные времена. Код, который вы ищете, будет примерно таким.

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;

Затем в Chat.jsx

 import { App } from "sendbird-uikit";

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

Вы можете найти рабочий пример здесь. Если у вас есть дополнительные вопросы, пожалуйста, не стесняйтесь присоединиться к нашему сообществу Sendbird. 🙂

Комментарии:

1. Не могли бы вы предоставить приведенный выше пример с typescript?

Ответ №2:

Попробуйте:

 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>
  )
}

Вам необходимо импортировать CSS (см. Ниже)

Если вы начнете с создания приложения отсюда: https://nextjs.org/learn/basics/create-nextjs-app

Убедитесь, что это работает. Затем установите UIKit:

 npm install sendbird-uikit --save

В вашем 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>
  )
}

Вам нужно будет создать _app.js для того, чтобы включить этот CSS:

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

Документация