如何将 sendbird-ui 套件与 next.js 一起使用
how to use sendbird-ui kit with next.js
我正在尝试将 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
尝试:
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";
得知您遇到困难,我深感遗憾。您正在寻找的代码应该是这样的。
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. If you have further questions please feel free to join our Sendbird Community。 :)
我正在尝试将 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
尝试:
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";
得知您遇到困难,我深感遗憾。您正在寻找的代码应该是这样的。
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. If you have further questions please feel free to join our Sendbird Community。 :)