Build your own Captcha with Next.js/React [Tutorial]

Опубликовано: 27 Январь 2025
на канале: Coding With Dawid

14,755

252

In this tutorial we are going to build our own and custom captcha with Next.js/React.js, cookies and session. The captcha is going to protect our contact form from spamming.

Demo: https://nextjs-captcha.vercel.app/
Code and images: https://github.com/dejwid/nextjs-captcha

Timestamps:
00:00:00 - Intro and demo
00:00:54 - Next.js setup and html structure
00:04:39 - Building captcha component
00:12:09 - Captcha image api endpoint
00:17:50 - Adding session (iron-session)
00:23:44 - Saving random images to session
00:33:42 - Selecting captcha images functionality
00:40:13 - Sending form functionality
00:45:27 - /send api endpoint
00:48:32 - validating captcha
00:57:18 - reseting captcha images and selection
01:07:56 - Outro