使用 Next.js App Router 实现 GET、POST、PUT 和 DELETE
内容提要
本文介绍了使用Next.js App Router（文档）的API路由的样板代码，用于一个待办事项的CRUD（创建、读取、更新、删除）应用程序。App Router支持客户端和服务器端渲染，允许复杂的路由和动态站点内容。文章提供了GET、POST、PUT和DELETE等不同的端点实现示例代码。此外，还介绍了数据获取和渲染的方法，以及身份验证和使用NextAuth.js保护页面路由和端点的建议。
延伸解读
App Router 路由处理程序的基本结构
文章中的每个端点都导出一个与 HTTP 方法同名的异步函数，如 GET、POST、PUT、DELETE，并接收 NextRequest 和包含 params 的上下文对象。这种设计让路由文件直接对应 URL 路径，例如 app/api/users/[userId]/todos/route.ts 处理 /users/:userId/todos 的请求。动态段通过 params 获取，便于构建 RESTful 风格的 API。
状态码与错误处理的约定
示例中明确区分了成功与失败的状态码：GET 成功返回 200，POST 创建成功返回 201，PUT 和 DELETE 成功返回 200；请求体无效时返回 400，服务器内部错误返回 500。这种约定有助于前端根据状态码判断请求结果，也提醒开发者在业务逻辑中主动校验输入并捕获异常，避免将错误暴露为 500。
数据获取与渲染模式的选择
文章展示了三种前端数据获取方式：客户端渲染需在组件中添加 "use client" 并使用 fetch；静态服务器端渲染在构建时生成页面；动态服务器端渲染通过导出 dynamic = "force-dynamic" 在请求时渲染。选择取决于内容是否需要实时更新：静态适合变化少的数据，动态适合每次请求都需最新数据的场景，客户端渲染则适合需要交互或额外 API 调用的页面。
身份验证的集成建议
文章建议使用 NextAuth.js 来保护页面路由和 API 端点，也可以自建登录系统或集成 Auth0、Google 等提供商。这意味着示例中的 CRUD 端点默认没有身份验证，直接部署可能存在安全风险。在实际应用中，应在路由处理程序或中间件中加入会话检查，确保只有授权用户能访问特定 userId 的资源。
Q&A
如何使用Next.js App Router实现待办事项的CRUD功能？
可以通过实现GET、POST、PUT和DELETE端点来完成待办事项的CRUD功能，具体代码示例可以参考文章提供的GitHub链接。
Next.js App Router支持哪些渲染方式？
Next.js App Router支持客户端渲染和服务器端渲染，允许复杂的路由和动态内容。
如何处理POST请求以创建新的待办事项？
在POST请求中，需从请求体中获取待办事项的标题，并调用数据库方法创建新项，返回状态201或400。
如何使用NextAuth.js进行身份验证？
可以使用NextAuth.js来保护页面路由和API端点，支持自定义登录系统或集成流行的认证提供者。
GET请求如何获取用户的待办事项？
GET请求通过用户ID查询数据库，返回待办事项列表，成功时返回状态200，失败时返回500。
如何更新现有的待办事项？
通过PUT请求，需提供待办事项的ID和更新内容，调用数据库更新方法，成功时返回状态200，失败时返回400。
