Nextjs 14 ReCAPTCHA Setup (FULL GUIDE With V3)

Video Description

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/nextjs14-recaptcha Packages used: https://www.npmjs.com/package/react-google-recaptcha-v3 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