Next.js 集成方案

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

tRPC ❤️ Next.js

Next.js 让您在单一代码库中轻松构建客户端和服务端。tRPC 则能无缝共享类型定义，确保应用数据请求的类型安全。

我们的 Next.js 集成方案基于 React Query 集成方案构建，并添加了 Next.js 专属 API，可同时处理客户端与服务器端渲染。

使用 Next.js 集成方案可获得以下功能：

• 服务端渲染 - 可配置 tRPC 在服务端渲染页面，然后在客户端进行注水处理。这样能避免初始加载状态，但首字节时间会受到服务端阻塞影响。了解更多：服务端渲染。

• 静态站点生成 - 在服务端预取查询并生成可直接部署的静态 HTML 文件。了解更多：静态站点生成。

• 自动 Provider 封装 - @trpc/next 提供高阶组件（HOC），自动为应用封装必要 Provider，无需手动配置。

技巧

若在新项目中使用 tRPC，建议参考示例项目：tRPC 示例项目