Next.js 集成

tRPC ❤️ Next.js

Next.js 可以轻松地在一个代码库中一起构建客户端和服务器。tRPC 可以轻松地在它们之间共享类型，从而确保应用数据获取的类型安全。

¥Next.js makes it easy to build a client and server together in one codebase. tRPC makes it easy to share types between them, ensuring typesafety for your application's data fetching.

我们的 Next.js 集成构建在 React 查询集成 之上，具有一些 Next.js 特定的 API，以处理客户端和服务器端渲染。

¥Our Next.js integration is built on top of our React Query Integration with some Next.js specific APIs, to handle both client and server side rendering.

使用 Next.js 集成时，你将获得以下功能：

¥When using the Next.js integration, you'll get the following features:

• 服务端渲染 - 你可以告诉 tRPC 在服务器上渲染页面，然后在客户端上对它们进行水化。这样，你将避免初始加载状态，尽管第一个字节的时间将被服务器阻止。了解有关 服务端渲染 的更多信息。

  ¥Server-side rendering - You can tell tRPC to render your pages on the server, and then hydrate them on the client. This way, you'll avoid an initial loading state, although time to first byte will be blocked by the server. Read more about Server-side rendering.

• 静态站点生成 - 在服务器上预取查询并生成可供使用的静态 HTML 文件。了解有关 静态站点生成 的更多信息。

  ¥Static site generation - Prefetch queries on the server and generate static HTML files that are ready to be served. Read more about Static site generation.

• 自动提供商封装 - @trpc/next 提供了一个高阶组件 (HOC)，它使用必要的提供程序封装你的应用，因此你不必自己动手。

  ¥Automatic Provider Wrapping - @trpc/next provides a higher-order component (HOC) that wraps your app with the necessary providers so you don't have to do it yourself.

提示

如果你在新项目中使用 tRPC，请考虑使用示例项目之一作为参考：tRPC 示例项目

¥If you're using tRPC in a new project, consider using one of the example projects for reference: tRPC Example Projects