【Next.js】ニュースレター登録フォームの作り方を送信状態とスパム対策まで解説

"use server";

import { addSubscriber } from "@/lib/newsletter";

export type SubscribeState = {
  status: "idle" | "success" | "error";
  message: string;
  email?: string;
};

const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const SUCCESS_MESSAGE =
  "確認メールを送りました。メール内のリンクを押すと登録が完了します。";

export async function subscribe(
  _prevState: SubscribeState,
  formData: FormData,
): Promise<SubscribeState> {
  // ハニーポットに値があればボット。登録せず、成功と同じ返事をする
  if (formData.get("hp_field")) {
    return { status: "success", message: SUCCESS_MESSAGE };
  }

  const email = String(formData.get("email") ?? "").trim();

  if (email.length > 254 || !EMAIL_PATTERN.test(email)) {
    return {
      status: "error",
      message: "メールアドレスの形式を確かめてください。",
      email,
    };
  }

  try {
    await addSubscriber(email);
  } catch (error) {
    console.error(error);
    return {
      status: "error",
      message: "登録できませんでした。少し時間をおいて、もう一度お試しください。",
      email,
    };
  }

  return { status: "success", message: SUCCESS_MESSAGE };
}

"use client";

import Link from "next/link";
import { useActionState } from "react";
import { subscribe, type SubscribeState } from "@/app/actions/subscribe";
import { SubscribeButton } from "@/components/SubscribeButton";

const initialState: SubscribeState = { status: "idle", message: "" };

export function NewsletterForm() {
  const [state, formAction, isPending] = useActionState(subscribe, initialState);
  const hasError = state.status === "error";

  return (
    <section className="mx-auto max-w-xl px-6 py-20">
      <h2 className="text-2xl font-semibold">週に1通、Next.js の小さな実装例を届けます</h2>
      <p className="mt-2 text-zinc-600">毎週木曜の朝に配信。いつでも1クリックで停止できます。</p>

      {state.status === "success" ? (
        <p role="status" className="mt-6 rounded-xl bg-emerald-50 p-4 text-sm text-emerald-800">
          {state.message}
        </p>
      ) : (
        <form action={formAction} className="relative mt-6">
          <label htmlFor="newsletter-email" className="text-sm font-medium">
            メールアドレス
          </label>
          <div className="mt-2 flex flex-col gap-3 sm:flex-row">
            <input
              id="newsletter-email"
              name="email"
              type="email"
              required
              autoComplete="email"
              placeholder="you@example.com"
              defaultValue={state.email}
              aria-invalid={hasError}
              aria-describedby={hasError ? "newsletter-error" : undefined}
              className="min-h-11 flex-1 rounded-full border border-zinc-300 px-5 text-base outline-none focus:border-zinc-900"
            />
            <SubscribeButton pending={isPending} />
          </div>

          {/* ハニーポット：人には見えない欄。ボットだけが値を入れる */}
          <div aria-hidden="true" className="absolute -left-[9999px] h-px w-px overflow-hidden">
            <label htmlFor="newsletter-hp">この欄は空のままにしてください</label>
            <input id="newsletter-hp" name="hp_field" type="text" tabIndex={-1} autoComplete="off" />
          </div>

          {hasError && (
            <p id="newsletter-error" role="alert" className="mt-2 text-sm text-red-600">
              {state.message}
            </p>
          )}

          <p className="mt-3 text-xs text-zinc-500">
            登録したアドレスは配信にだけ使います。{" "}
            <Link href="/privacy" className="underline underline-offset-2">
              プライバシーポリシー
            </Link>
          </p>
        </form>
      )}
    </section>
  );
}

"use client";

import { motion, useReducedMotion, type Variants } from "motion/react";

const rollOut: Variants = { rest: { y: "0%" }, hover: { y: "-100%" } };
const rollIn: Variants = { rest: { y: "100%" }, hover: { y: "0%" } };
const transition = { duration: 0.25, ease: "easeOut" } as const;

export function SubscribeButton({ pending }: { pending: boolean }) {
  const reduceMotion = useReducedMotion();
  const label = pending ? "送信中…" : "登録する";
  const canAnimate = !reduceMotion && !pending;

  return (
    <motion.button
      type="submit"
      disabled={pending}
      initial="rest"
      animate="rest"
      whileHover={canAnimate ? "hover" : undefined}
      whileFocus={canAnimate ? "hover" : undefined}
      className="inline-flex min-h-11 items-center justify-center rounded-full bg-zinc-900 px-6 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-60"
    >
      <span className="relative block overflow-hidden">
        <motion.span variants={rollOut} transition={transition} className="block">
          {label}
        </motion.span>
        <motion.span
          aria-hidden="true"
          variants={rollIn}
          transition={transition}
          className="absolute inset-0 block"
        >
          {label}
        </motion.span>
      </span>
    </motion.button>
  );
}