Next.js CAPTCHA Integration

Create a user account or log in with an existing one. Then create a new CAPTCHA or select an existing one. If you’re unsure whether TrustCaptcha is right for you, try our CAPTCHA service risk-free for 14 days at no cost.

On the CAPTCHA overview page, you will find all the important information, such as the site key and licence key, and you can also create your API key. Allow your websites to access your CAPTCHA by simply adding them to the access authorised domain list in the CAPTCHA security rules.

Use our React wrapper inside the client component that renders your form. The widget runs the CAPTCHA in the background and adds a hidden tc-verification-token field on submit, which Server Actions and Route Handlers receive as form data.

First, install our TrustCaptcha React package:

npm i @trustcomponent/trustcaptcha-react

Then add the <TrustcaptchaComponent> to the client component that renders your form:

"use client";

import { TrustcaptchaComponent } from "@trustcomponent/trustcaptcha-react";

export function ContactForm() {
  return (
    <form method="post" action="/api/contact">
      <input type="email" name="email" required />
      <TrustcaptchaComponent sitekey="<your_site_key>" />
      <button type="submit">Send</button>
    </form>
  );
}

The CAPTCHA widget will then be displayed inside your form:

Need detailed information about the CAPTCHA React widget integration?
For the full reference — including themes, languages, custom design and more — please read our documentation.

In a Next.js Route Handler (or Server Action), take the verification token from the form data, look up the result via our Node.js library, and decide whether to accept the request.

First, install our TrustCaptcha Node.js library:

npm i @trustcomponent/trustcaptcha-nodejs

Then validate the token inside your Route Handler and act on the result:

import { NextResponse } from "next/server";
import { TrustCaptcha } from "@trustcomponent/trustcaptcha-nodejs";

export async function POST(request: Request) {
  const formData = await request.formData();
  const token = String(formData.get("tc-verification-token") ?? "");

  try {
    const result = await TrustCaptcha.getVerificationResult(process.env.TRUSTCAPTCHA_API_KEY!, token);
    if (!result.verificationPassed || result.score > 0.5) {
      return NextResponse.json({ error: "CAPTCHA verification failed." }, { status: 400 });
    }
  } catch {
    return NextResponse.json({ error: "CAPTCHA verification failed." }, { status: 400 });
  }

  // CAPTCHA passed — process the request
  return NextResponse.json({ status: "ok" });
}

Need detailed information about the Next.js CAPTCHA integration?
For full step-by-step instructions — including a Server Action variant and a reusable verifier utility — please read our documentation.

Other backend framework instead of Next.js?
If you use a different framework, pick the matching recipe here. If your framework isn’t listed, your software developers can integrate the verification themselves using our documentation or ask our support team for a pre-built integration.

You are now protected by TrustCaptcha - congratulations!