Next.js14实战：表单格式化与CRUD操作全解析

一、表单格式化：从输入到输出的标准化处理

1.1 输入验证与实时反馈

在Next.js14中，表单验证需结合React Hook Form或Yup等库实现。以用户注册表单为例，使用react-hook-form的register方法绑定输入字段，并通过pattern属性定义正则验证规则：

import { useForm } from "react-hook-form";
const { register, handleSubmit, formState: { errors } } = useForm();
<form onSubmit={handleSubmit(onSubmit)}>
  <input 
    {...register("email", { 
      required: "邮箱必填", 
      pattern: {
        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
        message: "邮箱格式错误"
      }
    })} 
  />
  {errors.email && <p>{errors.email.message}</p>}
</form>

此方案通过errors对象实时捕获验证错误，并在UI层显示提示信息，避免无效数据提交。

1.2 数据格式化与清洗

提交前需对数据进行标准化处理。例如，日期字段需转换为ISO格式，金额需保留两位小数：

const onSubmit = (data) => {
  const formattedData = {
    ...data,
    birthDate: new Date(data.birthDate).toISOString(),
    salary: parseFloat(data.salary).toFixed(2)
  };
  // 提交formattedData
};

通过解构赋值与对象扩展，确保数据结构符合后端API要求。

二、数据操作：CRUD的Next.js实现

2.1 添加数据（Create）

使用Next.js的API路由处理数据提交。在pages/api/users.js中定义POST接口：

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const newUser = req.body;
    // 模拟数据库插入
    const response = await fetch('https://api.example.com/users', {
      method: 'POST',
      body: JSON.stringify(newUser),
      headers: { 'Content-Type': 'application/json' }
    });
    res.status(201).json(await response.json());
  } else {
    res.status(405).end();
  }
}

前端通过fetch调用该接口：

const createUser = async (data) => {
  const response = await fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: { 'Content-Type': 'application/json' }
  });
  return response.json();
};

2.2 读取数据（Read）

使用SWR或React Query实现数据缓存与轮询。以swr为例：

import useSWR from 'swr';
const fetcher = (url) => fetch(url).then(res => res.json());
const { data: users, error } = useSWR('/api/users', fetcher);
if (error) return <div>加载失败</div>;
if (!users) return <div>加载中...</div>;
return (
  <ul>
    {users.map(user => <li key={user.id}>{user.name}</li>)}
  </ul>
);

此方案自动处理加载状态与错误重试，提升用户体验。

2.3 修改数据（Update）

修改操作需先获取原始数据，再提交更新。在API路由中定义PUT接口：

// pages/api/users/[id].js
export default async function handler(req, res) {
  const { id } = req.query;
  if (req.method === 'PUT') {
    await fetch(`https://api.example.com/users/${id}`, {
      method: 'PUT',
      body: JSON.stringify(req.body)
    });
    res.status(200).end();
  }
}

前端通过表单预填充数据并提交更新：

const [user, setUser] = useState(null);
useEffect(() => {
  fetch(`/api/users/${id}`).then(res => res.json()).then(setUser);
}, [id]);
return (
  <form onSubmit={handleSubmit(async (data) => {
    await fetch(`/api/users/${id}`, {
      method: 'PUT',
      body: JSON.stringify(data)
    });
  })}>
    <input defaultValue={user?.name} {...register("name")} />
  </form>
);

2.4 删除数据（Delete）

删除操作需确认用户意图，并通过API路由执行：

// pages/api/users/[id].js
export default async function handler(req, res) {
  const { id } = req.query;
  if (req.method === 'DELETE') {
    await fetch(`https://api.example.com/users/${id}`, { method: 'DELETE' });
    res.status(204).end();
  }
}

前端结合确认对话框与状态刷新：

const deleteUser = async (id) => {
  if (confirm("确定删除吗？")) {
    await fetch(`/api/users/${id}`, { method: 'DELETE' });
    mutate('/api/users'); // 触发SWR重新验证
  }
};

三、进阶优化：状态管理与性能提升

3.1 全局状态管理

对于复杂应用，使用Zustand或Redux管理跨组件状态。以Zustand为例：

// stores/userStore.js
import { create } from 'zustand';
export const useUserStore = create((set) => ({
  users: [],
  fetchUsers: async () => {
    const res = await fetch('/api/users');
    set({ users: await res.json() });
  }
}));

组件中直接调用：

const { users, fetchUsers } = useUserStore();
useEffect(() => { fetchUsers(); }, []);

3.2 乐观更新（Optimistic UI）

在删除操作中，先更新本地状态再发送请求，提升响应速度：

const { users, setUsers } = useUserStore();
const deleteUser = async (id) => {
  setUsers(users.filter(user => user.id !== id)); // 乐观更新
  try {
    await fetch(`/api/users/${id}`, { method: 'DELETE' });
  } catch {
    setUsers(users); // 回滚
    alert("删除失败");
  }
};

四、安全与最佳实践

4.1 CSRF防护

在API路由中验证next-auth的CSRF令牌：

import { getToken } from "next-auth/jwt";
export default async function handler(req, res) {
  const token = await getToken({ req });
  if (!token) return res.status(401).end();
  // 处理请求
}

4.2 输入消毒

防止XSS攻击，对用户输入进行转义：

const safeHtml = (str) => {
  return str.replace(/[&<>'"]/g, 
    tag => ({
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      "'": '&#39;',
      '"': '&quot;'
    }[tag]));
};

五、总结与扩展

本篇详细阐述了Next.js14中表单格式化与CRUD操作的核心实现，涵盖输入验证、数据标准化、API路由调用、状态管理及安全防护。实际应用中，可结合以下方向扩展：

1. 表单库集成：使用react-final-form或Formik简化复杂表单逻辑。
2. 数据库直连：通过Prisma或Mongoose实现服务端数据操作。
3. 测试覆盖：编写Jest测试用例验证表单逻辑与API调用。

通过掌握这些技术点，开发者能够高效构建Next.js14应用的数据交互层，为后续功能开发奠定坚实基础。