如何使用 App Router 在 NextJS 中创建表单

Question

有一个非常明确的使用 Pages Router 创建表单的官方方法，但App Router.

我的第一个猜测是使用POST 路由器处理程序，但文档指出：

注意：以前，API 路由可用于处理表单提交等用例。路由处理程序可能不是这些用例的解决方案。准备好后，我们将建议使用突变。

然而，这种突变（又名服务器操作）是一个 alpha 功能。那么，我应该忽略这个建议并继续留下来吗Router Handler？我可能缺少任何其他模式吗？

Answer 1

我认为此警告已更改，现在它表示可以在这种情况下使用路由处理程序：

值得一提的是：与 API 路由一样，路由处理程序可用于处理表单提交等情况。正在开发一种与 React 深度集成的用于处理表单和突变的新抽象。

路由处理程序 ( app/api) 基本上相当于 API 路由（位于pages/api目录内）。您甚至不需要立即迁移或类似的事情，即使您对应用程序的其余部分使用应用程序路由器，API 路由仍然有效。因此，您仍然可以遵循这个旧指南并保留pages/api/form.js文件，或者如果您愿意，可以将其重新制作为app/api/route.js.

使用路由处理程序和 API 路由，您可以创建具有基于 JavaScript 的验证等的交互式表单，以及即使禁用 JS 也能工作的本机 HTML 表单。