Next.js 独立开发教程（十二）：数据操作（Mutating Data）

 更多有关Next.js教程，请查阅

【目录】Next.js 独立开发系列教程-CSDN博客

有兴趣的可以蹲个后续，我会陆续发布一系列的文章。

这个Next.js的入门教程算是告一段落，接下来，会是分章节的Next.js要点讲解，以及基于Next.js拓展的文章，例如：SEO、社交化营销、商业化布局等等。

Anyway，我会以建设独立开发能力为目标，精选一些实用的技术和非技术的内容跟大家分享。

---

目录

   系列文章目录

前言

1. 数据操作概述

2. 在 Next.js 中实现数据操作

2.1 创建 API 路由

2.2 客户端调用 API

示例：客户端操作数据

3. 优化数据操作体验

3.1 乐观更新

3.2 表单验证

3.3 并发请求处理

4. 数据操作的最佳实践

5. 总结

---

前言

在构建动态 Web 应用时，数据操作（如创建、更新、删除）是应用与用户交互的重要环节。Next.js 提供了强大的工具和灵活的架构支持，使开发者能够高效地处理数据操作，确保应用性能和用户体验的优化。

本教程将从基础出发，深入讲解如何在 Next.js 中实现数据操作，包括 API 路由的设计、客户端与服务器的交互、乐观更新、以及最佳实践。

1. 数据操作概述

数据操作（Mutating Data）主要包括以下三种操作：

1. 创建（Create）：添加新的数据记录。
2. 更新（Update）：修改现有的数据记录。
3. 删除（Delete）：移除不需要的数据记录。

在 Next.js 中，数据操作通常通过 API 路由完成，客户端通过 `fetch` 或其他请求库与服务器交互。

2. 在 Next.js 中实现数据操作

2.1 创建 API 路由

API 路由是实现数据操作的基础。Next.js 提供了内置的 API 路由机制，可以处理客户端发来的数据操作请求。

示例：API 路由处理数据操作

// pages/api/items.js

let items = [
  { id: 1, name: "Item 1" },
  { id: 2, name: "Item 2" },
];

// API 路由
export default function handler(req, res) {
  const { method } = req;

  switch (method) {
    case "GET": // 获取数据
      res.status(200).json(items);
      break;

    case "POST": // 添加新数据
      const newItem = { id: Date.now(), ...req.body };
      items.push(newItem);
      res.status(201).json(newItem);
      break;

    case "PUT": // 更新数据
      const { id, name } = req.body;
      items = items.map(item => (item.id === id ? { ...item, name } : item));
      res.status(200).json({ id, name });
      break;

    case "DELETE": // 删除数据
      const { id: deleteId } = req.body;
      items = items.filter(item => item.id !== deleteId);
      res.status(204).end();
      break;

    default:
      res.setHeader("Allow", ["GET", "POST", "PUT", "DELETE"]);
      res.status(405).end(`Method ${method} Not Allowed`);
  }
}

在上述代码中：