Next.js 13 + tRPC：天作之合

本文是深入探索 Next.js 13 和 tRPC 的实践指南。

从利用 Next.js 13 的最新特性，到利用 tRPC 提供的一种类型安全构建 API 的方法，让我们看看这两个强强联合的技术如何为网页开发者赋能，创建高性能且高互动性的应用程序。

话不多说，让我们直入主题吧！

构建 Next.js 13 项目环境

要构建 Next.js 项目，请查看这里的说明。安装过程通常包括在终端运行以下命令。

bash 复制代码

npx create-next-app@latest

依赖安装

在项目目录中打开一个终端，并执行以下命令之一开始：

bash 复制代码

npm install @trpc/client @trpc/server @trpc/react-query @tanstack/react-query zod
yarn add @trpc/client @trpc/server @trpc/react-query @tanstack/react-query zod
pnpm add @trpc/client @trpc/server @trpc/react-query @tanstack/react-query zod

创建 tRPC 服务器

进入你的 Next.js 13 项目的 src/ 文件夹------或者如果你没有选择 src/ 文件夹选项，则进入你项目的根目录------并创建一个名为 server 的新文件夹，里面有一个名为 trpc.ts 的文件：

typescript 复制代码

import { initTRPC } from "@trpc/server";

const t = initTRPC.create();

export const router = t.router;
export const publicProcedure = t.procedure;

这是简单的样板代码，允许你在 Next.js 13 后端创建 API 函数和路由。

在 src/server/ 目录内，创建一个新文件名为 index.ts：

typescript 复制代码

import { z } from "zod"

import { publicProcedure, router } from "./trpc"

export const appRouter = router({
  getData: publicProcedure.query(async () => {
    // 在真实应用中，你需要在这里从数据库获取数据
    console.log("getData")
    return "getData"
  }),
  setData: publicProcedure
    .input(z.string())
    .mutation(async ({ input }) => {
      // 在这里，你将使用方法传入的输入字符串来更新数据库。
      console.log(input)
      return input
    }),
})
// 这个类型将在后面用作参考...
export type AppRouter = typeof appRouter

我们从 trpc.ts 文件中导入了 publicProcedure 和 router 函数。
接着我们创建一个 appRouter，它是你的 API 函数的中心。
在 appRouter 中，我定义了一个简单的 getData 和 setData 函数用于演示。
在 setData 函数中，代码 input(z.string()) 确保使用 zod 验证输入数据，最大化端点安全和开发者体验。

进入 app/ 目录，按照如下顺序创建一系列文件和目录：api/trpc/[trpc]/route.ts。

typescript 复制代码

import { appRouter } from "@/server"
import { fetchRequestHandler } from "@trpc/server/adapters/fetch"

const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: () => ({}),
  })

export { handler as GET, handler as POST }

这创建了一个在运行过程时被调用的 API 端点。

为客户端和服务器端配置 tRPC 在 app/ 目录内，创建一个名为 _trpc 的文件夹，并创建一个名为 client.ts 的文件。这定义了一个在所有 Next.js 13 客户端组件内可用的 tRPC 实例。

typescript 复制代码

import { type AppRouter } from "@/server"
import { createTRPCReact } from "@trpc/react-query"

export const trpc = createTRPCReact<AppRouter>({})

在同一文件夹内，创建一个名为 serverClient.ts 的文件来定义一个适用于所有服务器端组件的 tRPC 实例。

typescript 复制代码

import { appRouter } from "@/server"
import { httpBatchLink } from "@trpc/client"

export const serverClient = appRouter.createCaller({
  links: [
    httpBatchLink({
      url: "http://localhost:3000/api/trpc",
    }),
  ],
})

注意：当你的代码部署到生产环境时，你需要更改 url http:localhost:3000。在这种情况下，你应该根据条件选择 url，如下所示：

typescript 复制代码

import { appRouter } from "@/server"
import { httpBatchLink } from "@trpc/client"

const url =
  process.env.NODE_ENV === "production"
    ? "your-production-url/api/trpc"
    : "http://localhost:3000/api/trpc"

export const serverClient = appRouter.createCaller({
  links: [
    httpBatchLink({ url }),
  ],
})

服务器端 tRPC 示例

让我们在服务器组件中运行我们之前定义的过程！打开 app/page.tsx 并复制以下代码：

typescript 复制代码

import { serverClient } from "./_trpc/serverClient"

export default async function page() {
  const data = await serverClient.getData()
  const dataSet = await serverClient.setData("test-data")

  return (
    <main>
        <div>{data}</div>
        <div>{dataSet}</div>
    </main>
  )
}

在终端窗口使用 npm run dev 运行应用程序，然后访问 localhost:3000/；你应该在 UI 和服务器端终端窗口中看到数据。

客户端 tRPC 示例

现在让我们在客户端组件中运行相同的过程！打开 app/page.tsx 并复制以下代码：

typescript 复制代码

"use client"

import { trpc } from "@/app/_trpc/client"

export default async function page() {
  const getData = trpc.getData.useQuery({
      // 你的 react-query 属性...
  })

  const setData = trpc.setData.useMutation({
      // 你的 react-query 属性...
  })

  return (
    <main>
        <div>{getData.data}</div>
        <div>{setData.data}</div>
    </main>
  )
}

结论

在服务器端和客户端示例中，你可能已经注意到返回的数据是 100% 类型安全的！这就是 tRPC 的作用！

你的 Next.js 13 项目开发流程将被百分百的数据验证和TS类型安全所守护，赶紧到你的Next.js项目里尝试吧！