React Hook Form、Zod を使ったフォームに reCAPTCHA v3 をサクッと導入する

npm install react-hook-form zod @hookform/resolvers

import { z } from "zod";

const schema = z.object({
  name: z.string().nonempty({ message: "名前は必須です" }),
  email: z.string().email({ message: "無効なメールアドレスです" }),
});

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm <
FormValues >
{
  resolver: zodResolver(schema),
};

// フォームの型を定義
interface FormValues {
  name: string;
  email: string;
}

// フォームの送信処理
const onSubmit: SubmitHandler<FormValues> = useCallback(
  async (data: z.infer<typeof formSchema>) => {
    try {
      const response = await fetch("/api/send", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
      });
      return { success: true };
    } catch (error) {
      console.log(error);
      return { success: false };
    }
  },
  []
);

<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register("name")} />
  {errors.name && <span>{errors.name.message}</span>}
  <input {...register("email")} />
  {errors.email && <span>{errors.email.message}</span>}
  <button type="submit">Submit</button>
</form>;

import { NextResponse } from "next/server";
import { Resend } from "resend";

const resend = new Resend(process.env.RESEND_API_KEY);

const EmailTemplate = ({ username, email }: { username: string; email: string }) => {
  return (
    <div>
      <h1>{username} 様よりお問い合わせがありました</h1>
      <p>【お名前】</p>
      <p>{username}</p>
      <p>【メールアドレス】</p>
      <p>{email}</p>
    </div>
  );
};

export async function POST(req: Request) {
  const { username, email } = await req.json();

  try {
    const { data, error } = await resend.emails.send({
      from: "Acme <onboarding@resend.dev>",
      to: ["your-email@example.com"],
      subject: "お問い合わせがありました",
      react: EmailTemplate({ username, email }),
    });

    if (error) {
      return NextResponse.json({ error: "メールの送信に失敗しました" });
    }

    return NextResponse.json({ data });
  } catch (error) {
    console.log(error);
    return NextResponse.json({ error });
  }
}

NEXT_PUBLIC_RECAPTCHA_SITE_KEY="6Ld1flkqAAAAAImDg196OrC2WVuscHVwDmZPMvNY"
RECAPTCHA_SECRET_KEY="6Ld1flkqAAAAAEoU0ivyPkYGIdggr7LxKE8GgYLf"

npm install react-google-recaptcha

//～～～～～～～～～～～
import ReCAPTCHA from "react-google-recaptcha";
import { useRef } from "react";

const recaptchaRef = useRef<ReCAPTCHA>(null);
//～～～～～～～～～～～

<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register("name")} />
  {errors.name && <span>{errors.name.message}</span>}
  <input {...register("email")} />
  {errors.email && <span>{errors.email.message}</span>}
  <button type="submit">Submit</button>
  // reCAPTCHA を組み込む
  <ReCAPTCHA
    sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY as string}
    size="invisible"
    ref={recaptchaRef}
  />
</form>

const recaptchaWithSubmit = async (data: z.infer<typeof formSchema>) => {
  if (!recaptchaRef.current) {
    console.error("reCAPTCHA reference is not set");
    return;
  }

  // reCAPTCHA トークンを取得
  const recaptchaToken = await recaptchaRef.current.executeAsync();

  if (!recaptchaToken) {
    setErrorMessage("reCAPTCHAトークンの取得に失敗しました。");
    return;
  }

  // トークンをonSubmitに渡す
  const result = await onSubmit(data, recaptchaToken);

  if (!result.success) {
    setErrorMessage("reCAPTCHAトークンの取得に失敗しました。");
  } else {
    setErrorMessage(null);
  }
};

<form onSubmit={handleSubmit(recaptchaWithSubmit)}>
  <input {...register("name")} />
  {errors.name && <span>{errors.name.message}</span>}
  <input {...register("email")} />
  {errors.email && <span>{errors.email.message}</span>}
  <button type="submit">Submit</button>
  <ReCAPTCHA
    sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY as string}
    size="invisible"
    ref={recaptchaRef}
  />
</form>

const onSubmit: SubmitHandler<FormValues> = useCallback(
-  async (data: z.infer<typeof formSchema>) => {
+  async (data: z.infer<typeof formSchema>, recaptchaToken: string) => {
    try {
      const response = await fetch("/api/send", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
-        body: JSON.stringify(data),
+        body: JSON.stringify({ ...data, recaptchaToken }),
      });
      return { success: true };
    } catch (error) {
      console.log(error);
      return { success: false };
    }
  },
  []
);

import { NextResponse } from "next/server";
import { Resend } from "resend";

const resend = new Resend(process.env.RESEND_API_KEY);

const EmailTemplate = ({ username, email }: { username: string; email: string }) => {
  return (
    <div>
      <h1>{username} 様よりお問い合わせがありました</h1>
      <p>【お名前】</p>
      <p>{username}</p>
      <p>【メールアドレス】</p>
      <p>{email}</p>
    </div>
  );
};

export async function POST(req: Request) {
  // reCAPTCHA トークンを受け取る
  const { username, email, recaptchaToken } = await req.json();

    // reCAPTCHAの検証
  const recaptchaResponse = await fetch(`https://www.google.com/recaptcha/api/siteverify`, {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    body: new URLSearchParams({
      secret: RECAPTCHA_SECRET_KEY as string,
      response: recaptchaToken,
    }),
  });

  const recaptchaData = await recaptchaResponse.json();

  if (!recaptchaData.success) {
    return NextResponse.json({ error: "reCAPTCHAの検証に失敗しました" }, { status: 403 });
  }

  try {
    const { data, error } = await resend.emails.send({
      from: "Acme <onboarding@resend.dev>",
      to: ["your-email@example.com"],
      subject: "お問い合わせがありました",
      react: EmailTemplate({ username, email }),
    });

    if (error) {
      return NextResponse.json({ error: "メールの送信に失敗しました" });
    }

    return NextResponse.json({ data });
  } catch (error) {
    console.log(error);
    return NextResponse.json({ error });
  }
}