Nextjs 14 ReCAPTCHA Setup (FULL GUIDE With V3)
ReCaptcha can be a pain to set up, especially V3. In this tutorial, we will set it up with a new Nextjs 14 project and go through every step, line by line.
This is a little longer than the content I usually post, as some comments have said I have been going too fast. Let me know if you like or dislike the longer content.
Github Repo: https://github.com/benjaminhaig/nextj...
Packages used:
https://www.npmjs.com/package/react-g...
https://www.npmjs.com/package/axios
Need a website? Check us out: https://fabled-web.ca
Chapters:
00:00 - Introduction
00:31 - Project Setup & NPM Packages
01:10 - Getting Public/Client & Private/Server Keys
02:32 - Environment Variables
03:42 - Form Setup
05:06 - Form Submission & useGoogleRecaptcha Hook
07:42 - API Route & Token Verification
13:16 - Calling Our API on the Client
14:36 - Creating ReCAPTCHA Wrapper
16:13 - Viewing in browser
17:32 - Analytics, Limitations, & Suggestions
18:30 - Outro