Next.js Zod 验证

在构建 Web 应用时，表单处理是一个常见的需求。用户输入的数据往往需要经过验证，以确保其符合预期的格式和规则。Zod 是一个强大的 TypeScript-first 的验证库，它可以帮助我们在 Next.js 应用中轻松实现表单验证。

什么是 Zod？

Zod 是一个 TypeScript-first 的验证库，它允许你定义数据的结构，并验证输入是否符合该结构。Zod 的主要优点是它与 TypeScript 紧密集成，能够提供类型安全的验证。

为什么在 Next.js 中使用 Zod？

Next.js 是一个流行的 React 框架，用于构建服务器端渲染（SSR）和静态生成（SSG）的 Web 应用。在 Next.js 中处理表单时，Zod 可以帮助我们：

确保用户输入的数据符合预期格式。
提供清晰的错误信息，帮助用户纠正输入错误。
与 TypeScript 集成，提供类型安全的验证。

安装 Zod

首先，我们需要在项目中安装 Zod。你可以使用 npm 或 yarn 来安装：

bash
npm install zod

或者

bash
yarn add zod

基本用法

让我们从一个简单的例子开始。假设我们有一个表单，用户需要输入他们的姓名和电子邮件地址。我们可以使用 Zod 来验证这些输入。

typescript
import { z } from 'zod';

// 定义验证规则
const userSchema = z.object({
  name: z.string().min(1, { message: "姓名不能为空" }),
  email: z.string().email({ message: "请输入有效的电子邮件地址" }),
});

// 验证用户输入
const userInput = {
  name: "John Doe",
  email: "john.doe@example.com",
};

const result = userSchema.safeParse(userInput);

if (result.success) {
  console.log("验证成功:", result.data);
} else {
  console.log("验证失败:", result.error.errors);
}

在这个例子中，我们定义了一个 userSchema，它要求 name 是一个非空字符串，email 是一个有效的电子邮件地址。我们使用 safeParse 方法来验证用户输入，并根据验证结果输出相应的信息。

在 Next.js 中使用 Zod

现在，让我们看看如何在 Next.js 中使用 Zod 进行表单验证。我们将创建一个简单的表单，用户可以在其中输入他们的姓名和电子邮件地址。

typescript
import { useState } from 'react';
import { z } from 'zod';

const userSchema = z.object({
  name: z.string().min(1, { message: "姓名不能为空" }),
  email: z.string().email({ message: "请输入有效的电子邮件地址" }),
});

export default function Form() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
  });
  const [errors, setErrors] = useState<{ [key: string]: string }>({});

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    const result = userSchema.safeParse(formData);

    if (!result.success) {
      const errorMap = result.error.flatten().fieldErrors;
      setErrors(errorMap);
    } else {
      setErrors({});
      console.log("表单提交成功:", result.data);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">姓名:</label>
        <input
          id="name"
          type="text"
          value={formData.name}
          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
        />
        {errors.name && <span>{errors.name}</span>}
      </div>
      <div>
        <label htmlFor="email">电子邮件:</label>
        <input
          id="email"
          type="email"
          value={formData.email}
          onChange={(e) => setFormData({ ...formData, email: e.target.value })}
        />
        {errors.email && <span>{errors.email}</span>}
      </div>
      <button type="submit">提交</button>
    </form>
  );
}

在这个例子中，我们创建了一个简单的表单组件。当用户提交表单时，我们使用 Zod 验证用户输入。如果验证失败，我们将错误信息显示在表单中。

实际应用场景

Zod 不仅可以用于简单的表单验证，还可以用于更复杂的场景。例如，你可以使用 Zod 验证 API 请求的输入数据，或者在服务器端验证用户提交的数据。

typescript
import { NextApiRequest, NextApiResponse } from 'next';
import { z } from 'zod';

const userSchema = z.object({
  name: z.string().min(1, { message: "姓名不能为空" }),
  email: z.string().email({ message: "请输入有效的电子邮件地址" }),
});

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    const result = userSchema.safeParse(req.body);

    if (!result.success) {
      return res.status(400).json({ errors: result.error.errors });
    }

    // 处理有效的用户数据
    return res.status(200).json({ message: "用户数据有效", data: result.data });
  }

  return res.status(405).json({ message: "方法不允许" });
}

在这个例子中，我们在 Next.js 的 API 路由中使用 Zod 验证用户提交的数据。如果数据无效，我们返回一个包含错误信息的响应。

总结

Zod 是一个强大的验证库，特别适合在 TypeScript 项目中使用。在 Next.js 中，Zod 可以帮助我们轻松实现表单验证，确保用户输入的数据符合预期格式。通过本文的示例，你应该已经掌握了如何在 Next.js 中使用 Zod 进行表单验证。

附加资源

练习

尝试扩展本文中的表单，添加更多的字段（如年龄、地址等），并使用 Zod 进行验证。
在 Next.js 的 API 路由中实现一个更复杂的验证逻辑，例如验证用户提交的 JSON 数据是否符合特定的结构。

通过这些练习，你将更深入地理解如何在 Next.js 中使用 Zod 进行表单验证。

什么是 Zod？​

为什么在 Next.js 中使用 Zod？​

安装 Zod​

基本用法​

在 Next.js 中使用 Zod​

实际应用场景​

总结​

附加资源​

练习​