Server Actions
Read the token from FormData
The token travels in the form, so an action verifies it with getRecaptchaToken and verifyRecaptcha, and gets a typed result instead of an exception.
reCAPTCHA v3 · React 19 · Next.js
reCAPTCHA v3 for Next.js, built for Server Actions.
A client field that keeps a fresh token in a hidden input, and a server function that checks it with Google. Typed results, one script per page, MIT licensed.
npm install recaptcha-next01 · Why
Why recaptcha-next
Lazy loading
Load Google only when needed
With lazy, the script waits until the form is near the viewport, and tokens refresh before they expire.
Navigation
One script per page
The script is loaded once and shared, also across client-side navigation, so Next.js routing never leaves duplicate badges.
Fails closed
A missing secret is refused in production
A deploy without RECAPTCHA_SECRET_KEY refuses every request instead of letting everyone in. Locally, the check is skipped with a warning.
02 · Docs
Docs
Guides and reference for recaptcha-next.
Start
Getting started
Add reCAPTCHA v3 to a Next.js form in three steps: install the package, put a field in the form, and verify the token in a Server Action.
Read
Guides
Server Actions
The token travels in the form data, so a Server Action can verify it without any extra request from the browser.
Read
Guides
Lazy loading
Google's script is heavy, and a form far down the page may never be reached. With lazy, the script waits until the form is near the viewport.
Read
Guides
Navigation and the badge
Next.js moves between pages without reloading, so a form can mount and unmount many times in one visit. This page explains what the package does about Google's script when that happens.
Read
Guides
Custom FormData
If you build FormData by hand, or send a fetch request, the hidden input is not included, because it only travels when the browser submits the .
Read
Guides
Testing
Your own tests should not call Google. The server side is built from small parts that you can replace.
Read
03 · Examples
Examples
Forms you can copy and adapt.
Contact form
A form that verifies a visitor with a Server Action and shows the result. This is the shape the package is tested with in a real Next.js app.
Read
Programmatic token
A form that asks for a token when the visitor submits, and sends it in a FormData built by hand. Use this for custom FormData or a fetch call.
Read