Next.js如何在联系人表单中实现react-google-recaptcha

Next.js是一个基于React的轻量级框架，用于构建服务器渲染的React应用程序。它提供了一种简单而强大的方式来创建具有优化性能和SEO友好的应用程序。

要在联系人表单中实现react-google-recaptcha，可以按照以下步骤进行操作：

首先，确保你已经在Google reCAPTCHA网站上注册了一个帐户，并获得了reCAPTCHA Site Key和Secret Key。
在Next.js项目中安装react-google-recaptcha库。可以使用以下命令进行安装：

npm install react-google-recaptcha

在联系人表单的页面中，导入react-google-recaptcha库和相关的React组件：

import ReCAPTCHA from "react-google-recaptcha";

在联系人表单的表单组件中，添加一个reCAPTCHA组件：

<form>
  {/* 其他表单字段 */}
  <ReCAPTCHA sitekey="YOUR_SITE_KEY" />
  <button type="submit">提交</button>
</form>

确保将YOUR_SITE_KEY替换为你在Google reCAPTCHA网站上获得的Site Key。

在Next.js的页面中，创建一个API路由来处理联系人表单的提交。可以使用next-connect库来简化API路由的创建。在API路由中，验证reCAPTCHA的响应是否有效：

import nextConnect from "next-connect";
import axios from "axios";

const handler = nextConnect();

handler.post(async (req, res) => {
  const { recaptchaResponse } = req.body;

  // 验证reCAPTCHA响应
  const verificationUrl = `https://www.google.com/recaptcha/api/siteverify?secret=YOUR_SECRET_KEY&response=${recaptchaResponse}`;
  const response = await axios.post(verificationUrl);

  if (response.data.success) {
    // reCAPTCHA验证通过，处理表单提交逻辑
    // ...
    res.status(200).json({ success: true });
  } else {
    // reCAPTCHA验证失败
    res.status(400).json({ success: false, message: "reCAPTCHA验证失败" });
  }
});

export default handler;

确保将YOUR_SECRET_KEY替换为你在Google reCAPTCHA网站上获得的Secret Key。

最后，在联系人表单的页面中，使用fetch或axios等库来发送表单数据和reCAPTCHA响应到API路由：

import { useState } from "react";
import axios from "axios";

const ContactForm = () => {
  const [recaptchaResponse, setRecaptchaResponse] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();

    // 发送表单数据和reCAPTCHA响应到API路由
    const response = await axios.post("/api/contact", { recaptchaResponse });

    if (response.data.success) {
      // 表单提交成功
      // ...
    } else {
      // 表单提交失败
      // ...
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 其他表单字段 */}
      <ReCAPTCHA sitekey="YOUR_SITE_KEY" onChange={setRecaptchaResponse} />
      <button type="submit">提交</button>
    </form>
  );
};

export default ContactForm;

这样，你就可以在Next.js的联系人表单中实现react-google-recaptcha了。