Next.js 集成

非官方测试版翻译

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

tRPC + Next.js

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

tRPC 为 App Router 和 Pages Router 均提供了一流支持。请根据您的项目选择对应指南：

App Router

新建 Next.js 项目的推荐方案。采用 React Server Components、fetch 适配器和 @trpc/tanstack-react-query。

核心特性：

• Server Components - 在服务端预取数据并流式传输至客户端

• Streaming - 利用 Next.js 流式传输实现最佳加载性能

• Suspense - 结合 Suspense 边界使用 useSuspenseQuery 处理加载状态

开始使用 App Router →

Pages Router

使用 @trpc/next 提供高阶组件（HOC）及针对 Pages Router 数据获取模式的集成钩子

核心特性：

• 服务端渲染 - 在服务端渲染页面并在客户端注水。了解更多关于 SSR 的内容

• 静态站点生成 - 在服务端预取查询并生成静态 HTML 文件。了解更多关于 SSG 的内容

• 自动 Provider 封装 - @trpc/next 通过 HOC 自动为应用封装所需 Provider

开始使用 Pages Router →

选择 App Router 还是 Pages Router

	App Router	Pages Router
Recommended for	New projects	Existing Pages Router projects
Data fetching	Server Components, prefetchQuery	getServerSideProps, getStaticProps, SSR via HOC
Server adapter	Fetch adapter	Next.js adapter
Client package	@trpc/tanstack-react-query	@trpc/next + @trpc/react-query
Provider setup	Manual QueryClientProvider + TRPCProvider	Automatic via withTRPC() HOC

技巧

新建项目推荐使用 App Router。现有 Pages Router 项目可继续使用 Pages Router 集成方案，该方案功能完善且完全受支持