"use client";
import { GoogleReCaptchaProvider } from "react-google-recaptcha-v3";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <GoogleReCaptchaProvider
      reCaptchaKey="ここにサイトキーを入力（envファイルでもOK"）"
      language="ja"
    >
      <Component />
    </GoogleReCaptchaProvider>
  );
}

import { NextResponse } from "next/server";

type Token = {
  token: string;
};

export async function POST(req: Request) {
  const data: Token = await req.json();
  const { token } = data;
  const serverSecretKey = `secret=${process.env.RECAPTCHA_SERVER_SECRET_KEY}&response=${token}`;
  const responce_recaptcha = await fetch(
    "https://www.google.com/recaptcha/api/siteverify",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: serverSecretKey,
    }
  );

  const responceJson_recaptcha = await responce_recaptcha.json();

  if (responceJson_recaptcha.success) {
    return NextResponse.json({ message: "success" });
  } else {
    return NextResponse.json({
      message: "error",
      error: "reCAPTCHA verificationに失敗しました。",
    });
  }
}

"use client";
import { NextPage } from "next";
import { useGoogleReCaptcha } from "react-google-recaptcha-v3";

const Contact: NextPage = () => {
  //reCAPTCHAの処理の関数定義
  const { executeRecaptcha } = useGoogleReCaptcha();

  return () => {
    //メール送信処理
    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
      event.preventDefault();

      // reCAPTCHAからtokenを取得
      let token = "";
      if (executeRecaptcha) {
        token = await executeRecaptcha("contact");
      } else {
        alert("何らかのエラーが発生しました。再度お試しください。");
      }

      // サーバーへrecaptcha認証要求
      const responce_server = await fetch("/api/recaptcha", {
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          token,
        }),
        method: "POST",
      });

      // レスポンスが200の場合にのみ、メール送信処理を実行
      if (responce_server.status === 200) {
        //ここにメール送信の処理
      } else {
        //ここにエラー時の処理
      }
    };

    return
    //省略
  };
};

export default Contact;