构建用于聊天的 Next.js 应用程序:将 Sendbird UIKit 添加到 Next.js 应用程序
![Nextjs blog cover](https://sendbird.imgix.net/cms/nextjs-blog-cover.jpg?auto=format,compress&crop=faces)
构建应用内聊天有很多复杂性。在构建功能丰富的聊天时,如果您有一组预先设计好的随时可用的聊天 UI组件,通常会有所帮助。Sendbird UIKit 提供UI 组件,可简化您构建应用内聊天的过程。在本教程中,您将学习如何将 Sendbird React UIKit V3添加到Next.js 13应用程序。
到本博客结束时,您将构建一个用于聊天消息传递的 Next.js 应用程序。这是它的外观的屏幕截图:
我们建议您查看最终代码,以及最终结果的现场演示。您可能还会发现观看下面的视频很有用。
![nextjs 博客图片](http://sendbird.sfo3.digitaloceanspaces.com/cms/nextjs-blog-image-1.jpg)
先决条件
在开始之前,请确保您注册了 Sendbird 帐户。对于本教程,您需要在系统上安装Node.js(版本 12.22.0 或更高版本)。
让我们开始吧!
![U Ikit Mobile content offer background](https://sendbird.imgix.net/cms/UIkit-content-offer-background.jpg?auto=format,compress&crop=faces)
The only UIKit you need.
为什么要构建用于聊天的 Next.js 应用程序?
Next.js 是构建聊天应用程序的不错选择的原因是因为 Next.js 可以在构建期间或根据服务器请求轻松呈现 React 组件。这与在用户设备上呈现的传统 React 应用程序相反。这通过不通过网络发送大量 JavaScript 并减少客户端呈现页面所需的时间来提高性能。
使用 Next.js 进行客户端渲染
除了提供服务器端渲染外,Next.js 还能够加载客户端特定组件。启用此功能的功能称为动态导入。您可以使用动态导入功能加载 Sendbird React UIKit,作为动态聊天 UI,确实需要客户端渲染。
Next.js 动态导入
在 Next.js 中,您可以使用动态导入仅在客户端加载组件。为此,您可以使用动态功能。例如,假设您有一个名为 MyAsyncComponent 的组件,您只想在客户端加载它。您可以这样做:
需要注意的一件关键事情是选项 ssr 被设置为 false。这确保该组件永远不会在服务器端环境中呈现,在服务器端环境中它可能会中断,很可能是因为缺少浏览器 API,例如 window 对象。
将 UIKit 添加到 Next.js
现在我们来谈谈如何将 UIKit 添加到您的 Next.js 应用程序以进行聊天。
创建一个 Next.js 项目
要创建新的 Next.js 项目,您需要在计算机上安装 Node.js 和 npm(Node.js 的包管理器)。
要创建 Next.js 项目,我们通过运行以下命令使用 create-next-app CLI 工具:
本博客中提供的示例代码使用 Javascript,但您可以在命令行工具提示时随意选择 TypeScript。
![nextjs 博客图片](http://sendbird.sfo3.digitaloceanspaces.com/cms/nextjs-blog-image-2.jpg)
导航到新创建的项目并使用以下命令启动应用程序:
您现在将在浏览器中运行一个基本的 Next.js 13 项目。
![nextjs 博客图片](http://sendbird.sfo3.digitaloceanspaces.com/cms/next-js-blog-image-3.jpg)
安装 UIKit
现在您已经启动并运行了一个项目,您可以安装Sendbird UIKit。我们将使用最新版本的库。请参阅 Senbird UIKit V3 的官方文档。
创建聊天组件
首先,让我们在项目的根目录下添加一个名为 components 的新文件夹。该目录将包含我们的聊天组件。稍后在此博客中,您将看到如何将此组件添加到页面,以便它仅在客户端呈现。
![nextjs 博客图片](http://sendbird.sfo3.digitaloceanspaces.com/cms/next-js-blog-image-4.jpg)
在我们新创建的 Chat.jsx 文件中,让我们添加以下导入 UIKit 并呈现 UIKit 聊天应用程序组件的代码。要使聊天占据全屏,请添加一个宽度和高度为 100% 的包装 div。Sendbird UIKit 需要一个用户 ID 和一个应用程序 ID 作为道具传递。这两条信息都可以通过您的Sendbird 仪表板找到。
将聊天组件添加到页面
现在您已经有了一个可用的聊天应用程序,您需要在某个地方呈现它。Next.js 路由使用页面的核心概念。当用户在浏览器中访问相应的页面路由时,页面就会被渲染。默认情况下,create-next-app 会为我们提供一个索引页面。让我们更新该文件以呈现我们的聊天组件。
上面的代码执行以下操作:
- 导入 Sendbird 样式,使聊天组件看起来不错。
- 使用 Next.js 动态导入功能来拉入 Chat.jsx 组件。确保它只在客户端呈现并避免服务器端呈现错误。
- 删除 <main> 标记内的所有内容,并将其替换为新创建的 <DynamicAppWithNoSSR> 组件。
最终结果将如下所示。
![nextjs 博客图片](http://sendbird.sfo3.digitaloceanspaces.com/cms/nextjs-blog-image-5.jpg)
结论
恭喜!现在你有一个 Next.js 应用程序,它仍然使用静态和服务器端呈现,并且还可以在客户端呈现 Sendbird 的交互式聊天组件。
如果您需要有关此博客中材料的更多指导,请参阅文档。不要忘记查看最终代码和结果的现场演示!您可能还会发现它很有趣,请参阅我们的应用内聊天演示。您还可以在Sendbird 社区找到答案,您可以在该论坛中提出和回答与Sendbird所有相关的问题。如果您需要帮助,请随时联系我们——我们的专家很乐意为您提供帮助。愉快的聊天建设!💻