Skip to content

How to add ReCaptcha to a Next.js form

ReCaptcha is Google's solution to spam and abuse with forms.

It's an invaluable tool. First create an account on if you haven't already, and add your site domain.

Get the v2, and select the "I'm not a robot" checkbox:

You'll get a site key, and a site secret.

Store the secret in your .env file:


Now in your Next.js site install react-google-recaptcha using npm:

npm install react-google-recaptcha

Now inside the page where you have the form, import it:

import ReCAPTCHA from 'react-google-recaptcha'

And you add it to the JSX:

<ReCAPTCHA size="normal" sitekey="<YOUR SITE KEY>" />

You should see it in the form:

Now if you try submitting your form it works because it's not doing anything. Anyone, bots included, can submit the form successfully without even clicking the "I'm not a robot" button.

You need to validate the captcha server-side to make it useful.

I suppose you send the form to a Next.js API route. In there, add a validateCaptcha method:

const validateCaptcha = (response_key) => {
  return new Promise((resolve, reject) => {
    const secret_key = process.env.RECAPTCHA_SECRET

    const url = `${secret_key}&response=${response_key}`

    fetch(url, {
      method: 'post'
      .then((response) => response.json())
      .then((google_response) => {
        if (google_response.success == true) {
        } else {
      .catch((err) => {

Now in the request processing main code, add this before doing anything else:

if (!(await validateCaptcha(req.body['g-recaptcha-response']))) {
  return res.redirect(`/captcha`)
delete req.body['g-recaptcha-response']

Create a /captcha page in Next.js to redirect if the captcha check is invalid.

In the frontend, you should add some validation prior to submitting the form:

  onSubmit={event => {
    if (grecaptcha.getResponse() === '') {
      alert("Please click <I'm not a robot> before sending the job")
→ Download my free Next.js Handbook!



You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about next: