Uploaded August 2024 | Updated September 2026, 1 week ago

---

Hello, my friends and fellow developers!

In this video, we cover how you can use Google's reCAPTCHA v3 in your Next.js 15 project and how you can use it with server actions!

I also explained how it works behind the scenes and we don't use any external library for this use-case

Let me know in the comments below if you want more Next.js content or something else.

Links mentioned in the video:
GitHub Repo: github.com/max-programming/recaptcha-v3-actions
reCAPTCHA V3 Docs Client Side: developers.google.com/recaptcha/docs/v3
reCAPTCHA V3 Docs Server Side: developers.google.com/recaptcha/docs/verify
Google Sheets Tutorial: youtu.be/0h4c3WuAYZE

Timestamps:

00:00 - Intro
00:15 - Register in admin console
01:56 - Starter project walkthrough
03:03 - How reCAPTCHA works
05:27 - Environment variables
07:06 - grecaptcha types package
07:39 - Adding reCAPTCHA script
09:55 - Generate reCAPTCHA token in client side
17:44 - Verify reCAPTCHA token in server action
23:17 - Creating types for token verification response
25:25 - Continue server action
27:14 - Show success or error on frontend
27:46 - Adding types for error codes
28:22 - Test handling of errors
28:55 - Conclusion

Other Tutorials:
⚛️ React and Material UI Todo App: bit.ly/reactmattodo
🟨 Other JavaScript videos: bit.ly/jstutorials
📘 Visual Studio Code videos: bit.ly/vscodevids
🔋 Build a Battery App in JS: youtu.be/J8_hwKSeffY

Connect 🔗 :
Twitter: twitter.com/MaxProgramming1
Facebook: facebook.com/Max-Programming-103081931147293
Github: github.com/max-programming

VS Code Theme used: Default Dark Modern

Suggest, ask doubts in the comments and share these videos to help!
Thanks for Watching!

#nextjs #reactjs #javascript