使用 Next.js App Router 实现 GET、POST、PUT 和 DELETE
内容提要
本文介绍了使用Next.js App Router（文档）的API路由的样板代码，用于一个待办事项的CRUD（创建、读取、更新、删除）应用程序。App Router支持客户端和服务器端渲染，允许复杂的路由和动态站点内容。文章提供了GET、POST、PUT和DELETE四个端点的实现代码示例。此外，还介绍了数据获取和渲染的方法，以及身份验证和结论。
延伸解读
App Router 的 API 路由与页面路由共享文件结构
文章示例将 API 路由放在 app/api/users/[userId]/todos/route.ts，与页面组件同处 app 目录下。这种设计让前后端代码在同一个项目内组织，路由基于文件系统自动生成，无需额外配置。对于从 Pages Router 迁移的开发者，需要注意 API 路由的导出方式从默认导出改为具名导出（如 export const GET），且请求和响应对象使用 NextRequest 和 NextResponse。
CRUD 端点状态码与请求体校验的实践
文章为每个操作指定了明确的状态码：GET 和 PUT、DELETE 成功返回 200，POST 创建成功返回 201，请求体无效返回 400，服务器错误返回 500。POST 和 PUT 都检查了请求体是否有效，例如 POST 要求 title 字段存在，PUT 要求请求体是对象。这种校验能防止无效数据进入数据库，但文章未涉及更细粒度的字段验证或错误信息国际化。
三种渲染方式的选择依据
文章展示了客户端渲染、静态服务器端渲染和动态服务器端渲染。客户端渲染需在组件顶部添加 "use client" 并使用 fetch 或 axios 请求 API；静态服务器端渲染在构建时生成页面，适合内容不常变动的场景；动态服务器端渲染通过导出 dynamic = "force-dynamic" 在每次请求时渲染，适合实时性要求高的页面。开发者应根据数据更新频率和用户交互需求选择合适的方式。
身份验证的初步建议与扩展方向
文章建议使用 NextAuth.js 保护页面路由和 API 端点，并提到可以自建登录系统或集成 Auth0、Google 等提供商。但示例代码中并未实现任何身份验证逻辑，所有端点都是公开的。在实际应用中，需要在 API 路由中验证用户身份，并确保用户只能操作自己的待办事项，避免越权访问。
Q&A
如何在Next.js中实现待办事项的CRUD操作？
可以通过Next.js App Router实现CRUD操作，使用GET、POST、PUT和DELETE四个端点来处理待办事项的创建、读取、更新和删除。
Next.js App Router支持哪些渲染方式？
Next.js App Router支持客户端渲染和服务器端渲染，允许复杂的路由和动态内容。
如何使用NextAuth.js进行身份验证？
可以使用NextAuth.js来保护页面路由和API端点，支持自定义登录系统或集成流行的身份验证提供商。
GET端点的作用是什么？
GET端点用于获取用户的待办事项，返回状态200和待办事项列表。
如何处理POST请求以创建新的待办事项？
在POST请求中，需提供待办事项的标题，成功后返回状态201和新创建的待办事项。
如何在Next.js中实现动态服务器端渲染？
可以通过设置和导出动态配置选项来实现动态服务器端渲染，以在请求时渲染页面。
