# Next.js でニュースレター登録フォームを作る > Next.js のフッターのニュースレターフォームです。同意のチェックと Turnstile を行うサーバーアクションが Ikiform に送信し、ルートハンドラーが読者を Kit に追加します。 公開日 2026-10-25 · https://ikiform.com/ja/guides/newsletter-signup/nextjs ルートレイアウトのフッターにクライアントのフォームを置き、サーバーアクションに向けます。アクションは同意のチェックボックスと Cloudflare Turnstile のトークンを確認し、シークレットキー付きで登録をフォームバックエンドに転送します。別のルートハンドラーがバックエンドの署名付き Webhook を受け取って読者をメールツールに追加するので、スパムがリストに届くことはありません。 [メインガイドの Next.js タブ](https://ikiform.com/ja/guides/newsletter-signup.md#form)には、サーバーアクションとフォームのコンポーネントがあります。このページでは実際のサイト向けに全体を作ります。すべてのページのフッターに置く 1 つのフォーム、シークレットキーで Ikiform の確認がスキップされても機能する人間確認、そして問題のない登録を Kit に渡すルートハンドラーです。製品の設定とキーについては [Next.js のドキュメントガイド](https://ikiform.com/ja/docs/guides/nextjs.md)にあります。 ## Next.js でフッターのフォームにすると何が変わるか フッターのフォームはルートレイアウトにあるので、Next.js がデプロイ時に 1 回だけビルドするページも含め、すべてのページで描画されます。そこから 3 つのことが言えます。 | 懸念 | 何が起きるか | この構成でしていること | | --- | --- | --- | | 静的なページ | フォームが描画中に Cookie やヘッダーを読むと、すべてのページが動的になってしまう | フォームは描画時に何も読まない。リクエストに触れるのはアクションだけ | | 人間確認 | シークレットキー付きの送信は Ikiform の Turnstile のチェックをスキップする | アクションの中で独自に Turnstile のチェックを行う | | 呼び出せる人 | サーバーアクションは、フォームを通さなくても呼べる公開の POST エンドポイント | 何かを送る前に同意とトークンを検証する | 図: Next.js のフッターからの登録が Ikiform に、そして Kit に届くまで 1. 読者がフッターのフォームに入力します。読んでいるページがどこであれ、サーバーアクションに送信されます。 2. アクションは同意のチェックボックスを確認し、次に Cloudflare で Turnstile のトークンを検証します。 3. どちらかのチェックに失敗すると、メッセージと入力したメールアドレス付きでフォームが戻ります。何も送信されません。 4. そうでなければ、アクションはシークレットキーとブラウザーの Origin を付けて登録を Ikiform に送信します。 5. Ikiform の応答がアクションの状態になり、フォームが「受信トレイを確認してください」の一文に置き換わります。 6. それとは別に、Ikiform はスパムではないすべての登録について署名付きの Webhook を送ります。ルートハンドラーがそれを検証し、読者を Kit のフォームに追加します。そのフォームの特典メールが Kit の確認メールです。一度は自分のアドレスでテストしてください。理由は [Kit のガイド](https://ikiform.com/ja/guides/newsletter-signup/kit.md)で説明しています。 アクション自身が Kit を呼ぶことはありません。Ikiform はスパムにも本物の登録と同じ成功を返すので、どの登録が本物かを知っているのは Webhook だけです。 ## プロジェクトの準備 `プロジェクトの構成`: ```text app/ layout.tsx newsletter/ actions.ts newsletter-form.tsx submit-button.tsx page.tsx api/ikiform/route.ts lib/ turnstile.ts .env.local ``` **API keys** で `submissions:write` スコープのシークレットキーを作ります。Cloudflare のダッシュボードで、自分のドメインと `localhost` 用の Turnstile ウィジェットを作ります。`NEXT_PUBLIC_` の接頭辞を付けてよいのはサイトキーだけで、ほかの値はサーバー専用にしておく必要があります。 `.env.local`: ```bash IKIFORM_SECRET_KEY=ik_sk_your_secret_key NEXT_PUBLIC_TURNSTILE_SITE_KEY=your_turnstile_site_key TURNSTILE_SECRET_KEY=your_turnstile_secret_key IKIFORM_WEBHOOK_SECRET=whsec_your_webhook_secret KIT_API_KEY=your_kit_v4_api_key KIT_FORM_ID=1234567 ``` [ピラーのフィールド定義](https://ikiform.com/ja/guides/newsletter-signup.md#fields)をフォームの **Fields** タブに貼り付けると、何が届いても Ikiform が必須の `consent` ボックスを強制します。 ## 作ってみる ### Turnstile のチェック Cloudflare の siteverify エンドポイントは、シークレット、トークン、任意で訪問者の IP を受け取ります。トークンの有効期間は 300 秒で、確認できるのは 1 回だけです。 `lib/turnstile.ts`: ```ts import "server-only"; const SITEVERIFY = "https://challenges.cloudflare.com/turnstile/v0/siteverify"; export async function passesTurnstile(token: string, visitor?: string) { if (!token) return false; const body = new URLSearchParams({ secret: process.env.TURNSTILE_SECRET_KEY ?? "", response: token }); if (visitor) body.set("remoteip", visitor); const response = await fetch(SITEVERIFY, { method: "POST", body }).catch(() => null); const outcome = (await response?.json().catch(() => null)) as { success?: boolean } | null; return outcome?.success === true; } ``` ### サーバーアクション `app/newsletter/actions.ts`: ```ts "use server"; import { headers } from "next/headers"; import { passesTurnstile } from "@/lib/turnstile"; export interface SignupState { status: "idle" | "subscribed" | "error"; field?: "email" | "consent" | "check"; message: string; email: string; firstName: string; } const PLACEMENTS = ["footer", "post", "newsletter-page"]; export async function subscribe(_previous: SignupState, formData: FormData): Promise { const email = String(formData.get("email") ?? "").trim(); const firstName = String(formData.get("first_name") ?? "").trim().slice(0, 80); const kept = { email, firstName }; if (formData.get("consent") !== "true") { return { ...kept, status: "error", field: "consent", message: "Tick the box so we know you want the emails." }; } const request = await headers(); const visitor = request.get("x-forwarded-for")?.split(",")[0]?.trim(); if (!(await passesTurnstile(String(formData.get("cf-turnstile-response") ?? ""), visitor))) { return { ...kept, status: "error", field: "check", message: "The human check didn't pass. Try once more." }; } const source = String(formData.get("source") ?? ""); let response: Response; try { response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json", Authorization: `Bearer ${process.env.IKIFORM_SECRET_KEY}`, Origin: request.get("origin") ?? "", }, body: JSON.stringify({ email, first_name: firstName || undefined, consent: true, source: PLACEMENTS.includes(source) ? source : "footer", _gotcha: String(formData.get("_gotcha") ?? ""), }), signal: AbortSignal.timeout(8000), }); } catch { return { ...kept, status: "error", message: "We couldn't reach the list. Try again in a moment." }; } const result = await response.json().catch(() => null); if (result?.ok) { return { status: "subscribed", message: "Almost done. Open the email we sent you and confirm your address.", email: "", firstName: "" }; } const emailError = result?.error?.fields?.email?.[0]; if (emailError) return { ...kept, status: "error", field: "email", message: emailError }; return { ...kept, status: "error", message: result?.error?.message ?? "Couldn't subscribe. Try again." }; } ``` - 同意はコストがかからないので先に確認します。Turnstile の呼び出しは 2 番目です。 - `source` は固定の一覧と照合します。細工した送信で設置場所のレポートをゴミで埋めることはできません。 - Ikiform は無料の `localhost` テストをそのヘッダーで判別し、サーバーの `fetch` は Origin を送らないので、`Origin` の行でブラウザーのオリジンを引き継ぎます。 - どのエラーでも、入力されたメールアドレスと名前を返します。React はアクションのあとにフォームをリセットしますが、`defaultValue` で元に戻します。 - ハニーポットはそのまま転送されます。Ikiform は埋まったものをスパムとして保存して成功を返すので、ボットは何も学べません。 > サーバー側の版はシークレットキー付きで送信するので、Ikiform は **Allowed domains** と人間確認をスキップします。その場合はすべての送信がサーバーの IP から来るため、訪問者ごとに 1 分あたり 5 件という Standard の制限が、全訪問者をまとめて数えることになります。サーバー経由で送信するフォームには Relaxed か Custom の[レート制限](https://ikiform.com/ja/docs/rate-limits.md)を選び、`IKIFORM_SECRET_KEY` はサーバー専用の環境変数に置いてください。 ### フォームと送信中の状態 `app/newsletter/submit-button.tsx`: ```tsx "use client"; import { useFormStatus } from "react-dom"; export function SubmitButton() { const { pending } = useFormStatus(); return ; } ``` `app/newsletter/newsletter-form.tsx`: ```tsx "use client"; import Script from "next/script"; import { useActionState, useEffect, useId, useRef } from "react"; import { type SignupState, subscribe } from "./actions"; import { SubmitButton } from "./submit-button"; declare global { interface Window { turnstile?: { render(box: HTMLElement, options: { sitekey: string }): string; reset(id: string): void }; } } const initial: SignupState = { status: "idle", message: "", email: "", firstName: "" }; export function NewsletterForm({ source }: { source: "footer" | "post" | "newsletter-page" }) { const [state, action] = useActionState(subscribe, initial); const id = useId(); const box = useRef(null); const widget = useRef(null); function mountCheck() { if (!box.current || !window.turnstile || widget.current) return; widget.current = window.turnstile.render(box.current, { sitekey: process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ?? "", }); } useEffect(mountCheck, []); useEffect(() => { if (state.status === "error" && widget.current) window.turnstile?.reset(widget.current); }, [state]); if (state.status === "subscribed") return

{state.message}

; return (