浅尝zod

本文用到的包版本

• next: 14.2.3
• zod: 3.23.8

什么是zod

Zod 是一个 TypeScript 优先的声明式输入验证和解析库。它旨在为开发者提供一种直观且高效的方法来定义和验证数据结构。与其他验证库相比，Zod 的优势在于其强大的类型推断功能和简洁的 API。

为什么选择Zod

emmmm, 因为喜欢超人中的这个角色，嘻嘻嘻嘻

言归正传：

• TypeScript-first，Zod 与 TypeScript 深度集成，能够提供全面的类型推断和类型检查
• Zod 的 API 设计简洁直观，易于上手
• Zod 支持复杂的数据结构验证，包括嵌套对象、数组、枚举等...

在Nextjs中创建一个API

我们创建一个要求验证查询参数中的 name 和 email 字段的API，并将传入的参数以json的形式返回。

定义inputSchema，要求 name 字段是一个最长为 256 个字符的字符串，email 字段是一个符合邮箱格式的字符串。

使用inputSchema的parse 方法验证输入数据，通过try catch进行错误捕获，如果验证成功，返回验证后的数据；如果验证失败，捕获错误并返回错误信息。

src/app/api/zod
└── route.ts

route.ts中的代码如下

import { NextRequest, NextResponse } from 'next/server'
import z from 'zod'
const inputSchema = z.object({
  name: z.string().max(256),
  email: z.string().email()
})

export function GET(request: NextRequest) {
  const query = request.nextUrl.searchParams

  const name = query.get('name')
  const email = query.get('email')

  try {
    const result = inputSchema.parse({ name, email })
    return NextResponse.json(result)
  } catch (error: any) {
    return NextResponse.json({ error: error.message })
  }
}

我们通过url发起请求，如下图：

如果我们传递不符合校验的的email，如图：

不使用try catch进行错误捕获，使用用safeParse进行处理

代码如下：

import { NextRequest, NextResponse } from 'next/server'
import z from 'zod'
const inputSchema = z.object({
  name: z.string().max(256),
  email: z.string().email()
})

export function GET(request: NextRequest) {
  const query = request.nextUrl.searchParams

  const name = query.get('name')
  const email = query.get('email')

  const result = inputSchema.safeParse({ name, email })
  
  if (result.success) {
    return NextResponse.json(result.data)
  } else {
    return NextResponse.json(result.error)
  }

}

总结

本文主要通过一个简单的demo，使用zod进行对请求参数进行了简单的校验，感觉Zod 在输入验证方面足够简洁与强大，推荐大家试试。