如何在 next.js 中使用 sendbird-ui 套件答案

【问题标题】：how to use sendbird-ui kit with next.js如何在 next.js 中使用 sendbird-ui 套件
【发布时间】：2021-07-10 21:21:02
【问题描述】：

我正在尝试将 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 }
)

在文档中提供

但仍然得到这个 screen shot of the error

【问题讨论】：

标签： next.js sendbird

【解决方案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>
);

您可以找到一个工作示例here。如果您还有其他问题，请随时加入我们的Sendbird Community。 :)

【讨论】：

你能用打字稿提供上面的例子吗？

【解决方案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";

documentation

【讨论】：