Create Form and Validation With Shadcn UI | NextJs 13

Building Sign-Up and Sign-In Forms with React Hook Form, Zod Validation, and Shadcn UI | Next.js app router
React-Hook-Form & Yup Tutorial - • Create Signup Form wit...
🔗Source:
[Next.js] nextjs.org/
[Shadcn UI] ui.shadcn.com/docs
[Lucide React] lucide.dev/icons
👋🏻Contact Me:
canddev.vercel.app/
Timestamps:
0:00 - Demo
01:02 - Install Next.js
04:08 - Navbar Component
06:15 - Install Shadcn UI
13:49 - Sign in Page
19:37 - Install Form component
34:04 - Sign up Page
40:13 - GoogleSignInButton Component
43:15 - Done
🌎 Find Me Here:
Instagram : / candra_kriswinarto
GitHub: github.com/candraKriswinarto/
Linkedin: / candra-kriswinarto
#programming

[@MrKeliv]

This is what I need for my Login Form using react-hook form and zod.

[@deprus97]

Fire bro, just what I needed👍 top content

[@MightyKingKala]

once again banger video bro, we appreciate it!

[@CandDev]

Thanks a lot! 🙌

[@mirzoevfaridun3411]

Thanks a lot, it is very helpful tutorial!

[@owenhochwald506]

thanks this is exactly what i needed

[@mememihnea]

Really cool video. Keep it up

[@impydev]

You saved my day!

[@hamzahix4860]

Thank you!

[@nahrulk]

Tankyu so much mas kris

[@luyvannda]

Thank you so much for the video, I was looking to build a sign in and sign up form with next.js, typescript, react form hook, shadcn Ui for my internship tasks and this video is like a godsend to me. I hope to find resources for how to implement google sign-in and sign-up in real time. Cos at the last minutes of this video only console.log was called from an onClick event. But in overall, It has been an amazing experience coding along with this video. :)

[@CandDev]

this is how you can implement the google sign-in ua-cam.com/video/k1TL-AzavvY/v-deo.htmlsi=KLfgqS03BQRrashX 🚀

[@luyvannda]

@@CandDev Thank you so much brother. God bless you. :)

[@suzsg6169]

good guide!

[@codewithsoyeb]

Thanks sir.

[@lokeshvasnik6872]

Thanks

[@rickychan1143]

Thank ❤❤❤

[@anggaerlangga4948]

thanks mas

[@CandDev]

Semoga bermanfaat mas

[@devber2450]

33:49

[@stevebendersky2056]

in the onSubmit function I use fetch with POST?

[@stevebendersky2056]

also, is this type of form is the new nextJS form with no javascript and states? (form+action)

[@sonnyilham309]

what is extension u used in this video 4:43

[@CandDev]

It's called 'auto import,' but I believe it's installed by default in VSCode.

[@Abdullah-oj2ih]

Puh... sepuh...

[@CandDev]

ajarin dong puh

[@user-fo7rt7gm1y]

36:49
- I'm gonna add minimum value here ".min(1, "Username is required")"
- Let's check that: *error message is still "Required"*
- AlRigHT NiCCeeee! 😐

[@codewithsoyeb]

Error message is still "Required" because he did not click the "sign up" button again after the changes.

[@user-fo7rt7gm1y]

@@codewithsoyeb
z.string({
required_error: getText("form.email.errors.required"),
})
Here is a correct way to do it. After that you can add .min(), max(), etc..