CAPTCHA, which stands for “Completely Automated Public Turing test to tell Computers and Humans Apart,” is a way to differentiate between human us

How to Use Google's ReCaptcha V3 with NextJS 13 and the New App Router

submited by

Style Pass

2024-04-24 11:00:05

CAPTCHA, which stands for “Completely Automated Public Turing test to tell Computers and Humans Apart,” is a way to differentiate between human users and bots. This functionality is especially crucial for form submissions to prevent spam and abuse. Invisible CAPTCHA doesn’t interrupt the user flow and performs these checks seamlessly in the background.

Google ReCaptcha V3 is an excellent example of an invisible CAPTCHA. After you include some JavaScript from Google on your page, that script will add a token to your form submission. Then, on the server-side, you’ll verify this token using a secret key that only the server knows. If the CAPTCHA verification passes, you’re clear to proceed with operations like registering a user.

NextJS 13 introduces a new folder structure, notably different from the older pages directory approach. The new structure looks something like this:

Here, /app/api/contactFormSubmit/route.ts is where your server-side logic resides. Specifically, this is the server-side handler that listens to HTTP POST requests from the form on your website. This form submission will include a token generated by Google ReCaptcha V3.