构建用于聊天的 Next.js 应用程序：将 Sendbird UIKit 添加到 Next.js 应用程序
构建应用内聊天有很多复杂性。在构建功能丰富的聊天时，如果您有一组预先设计好的随时可用的聊天 UI组件，通常会有所帮助。Sendbird UIKit 提供UI 组件，可简化您构建应用内聊天的过程。在本教程中，您将学习如何将 Sendbird React UIKit V3添加到Next.js 13应用程序。
到本博客结束时，您将构建一个用于聊天消息传递的 Next.js 应用程序。这是它的外观的屏幕截图：
我们建议您查看最终代码，以及最终结果的现场演示。您可能还会发现观看下面的视频很有用。
先决条件
在开始之前，请确保您注册了 Sendbird 帐户。对于本教程，您需要在系统上安装Node.js（版本 12.22.0 或更高版本）。
让我们开始吧！
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。
导航到新创建的项目并使用以下命令启动应用程序：
您现在将在浏览器中运行一个基本的 Next.js 13 项目。
安装 UIKit
现在您已经启动并运行了一个项目，您可以安装Sendbird UIKit。我们将使用最新版本的库。请参阅 Senbird UIKit V3 的官方文档。
创建聊天组件
首先，让我们在项目的根目录下添加一个名为 components 的新文件夹。该目录将包含我们的聊天组件。稍后在此博客中，您将看到如何将此组件添加到页面，以便它仅在客户端呈现。
在我们新创建的 Chat.jsx 文件中，让我们添加以下导入 UIKit 并呈现 UIKit 聊天应用程序组件的代码。要使聊天占据全屏，请添加一个宽度和高度为 100% 的包装 div。Sendbird UIKit 需要一个用户 ID 和一个应用程序 ID 作为道具传递。这两条信息都可以通过您的Sendbird 仪表板找到。
将聊天组件添加到页面
现在您已经有了一个可用的聊天应用程序，您需要在某个地方呈现它。Next.js 路由使用页面的核心概念。当用户在浏览器中访问相应的页面路由时，页面就会被渲染。默认情况下，create-next-app 会为我们提供一个索引页面。让我们更新该文件以呈现我们的聊天组件。
上面的代码执行以下操作：
- 导入 Sendbird 样式，使聊天组件看起来不错。
- 使用 Next.js 动态导入功能来拉入 Chat.jsx 组件。确保它只在客户端呈现并避免服务器端呈现错误。
- 删除 <main> 标记内的所有内容，并将其替换为新创建的 <DynamicAppWithNoSSR> 组件。
最终结果将如下所示。
结论
恭喜！现在你有一个 Next.js 应用程序，它仍然使用静态和服务器端呈现，并且还可以在客户端呈现 Sendbird 的交互式聊天组件。
如果您需要有关此博客中材料的更多指导，请参阅文档。不要忘记查看最终代码和结果的现场演示！您可能还会发现它很有趣，请参阅我们的应用内聊天演示。您还可以在Sendbird 社区找到答案，您可以在该论坛中提出和回答与Sendbird所有相关的问题。如果您需要帮助，请随时联系我们——我们的专家很乐意为您提供帮助。愉快的聊天建设！💻
