Next.js 中可以使用多种方式来处理表单提交。下面我将介绍两种常见的处理方式：

  1. 使用表单的默认提交行为：在 Next.js 中，可以直接使用 HTML 表单的默认提交行为来处理表单提交。在页面的 JSX 中，可以使用 `` 标签包裹表单元素，并给 `` 标签添加 `onSubmit` 属性来指定一个处理函数。这个处理函数会在用户点击提交按钮后被触发，然后你可以在该处理函数中访问表单中的输入值以及执行相应的逻辑。例如：

  jsx

  function handleSubmit(event) {

   event.preventDefault(); // 阻止默认的表单提交行为

   const formData = new FormData(event.target);

   const data = Object.fromEntries(formData.entries());

   // 在这里处理表单提交逻辑

   console.log(data);

  }

  export default function MyForm() {

   return (

   名字：

   提交

   );

  }

  2. 使用 API 路由处理表单提交：在 Next.js 中，还可以使用 API 路由来处理表单提交。你可以创建一个专门用于处理表单提交的 API 路由，并在前端代码中使用 `fetch` 或者其他 HTTP 请求库来发送表单数据。例如：

  首先，创建一个名为 `api/submit.js` 的文件来处理表单提交：

  javascript

  export default function handler(req, res) {

   if (req.method === 'POST') {

   const { name } = req.body;

   // 在这里处理表单提交逻辑

   console.log(name);

   res.status(200).json({ message: '提交成功' });

   } else {

   res.status(405).json({ message: '只允许使用 POST 方法' });

   }

  }

  然后，在页面的 JSX 中发送请求并处理表单提交：

  jsx

  import { useState } from 'react';

  export default function MyForm() {

   const [name, setName] = useState('');

   function handleSubmit(event) {

   event.preventDefault(); // 阻止默认的表单提交行为

   fetch('/api/submit', {

   method: 'POST',

   headers: {

   'Content-Type': 'application/json',

   },

   body: JSON.stringify({ name }),

   })

   .then(response => response.json())

   .then(data => {

   // 在这里处理响应数据

   console.log(data);

   })

   .catch(error => {

   // 在这里处理错误

   console.error(error);

   });

   }

   return (

   名字：

   setName(event.target.value)} />

   提交

   );

  }

  到这里，你已经学会了在 Next.js 中处理表单提交的两种常见方式。根据实际需求选择合适的方式来处理即可。