reCAPTCHA v3 with Next.js

This repository shows how to implement reCAPTCHA v3 with Next.js without using a library. More details on the implementation can be found in the article reCAPTCHA v3 with Next.js.

Getting Started

First, clone this repository:

git clone https://github.com/kokou2kpadenou/recaptcha3-nextjs.git

After cloning, go to the project directory and install the packages:

npm install
or 
yarn install

Second, create the .env.local file in the project root directory. You will need to sign up for an API key pair for the project. Use the following template to complete the .env.local file.

NEXT_PUBLIC_RECAPTCHA_SITEKEY=<replace-with-your-site-key>
RECAPTCHA_SECRETKEY=<replace-with-your-secret-key>

Third, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.