Zod Tutorial - All 10 places for Zod in your React / Next.js app

👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). Check out Kinde for authentication: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (React + Next.js course out soon!): email.bytegrad.com
⏱️ Timestamps:
0:00 Intro
0:32 Full-Stack Overview
1:27 Front end: number 1 - 5
4:13 Example 1 - 2: API requests
19:16 Example 3: Form data
24:24 Example 4: localStorage
28:23 Example 5: URL
30:56 Back end: number 6 - 10
36:06 Example 6 - 8: back-end API
41:24 Example 9: environment variables
43:23 Example 10: file system
44:27 BONUS Example 11: URL (back end)
46:12 BONUS Example 12: Database (ORM)
48:48 Important
#webdevelopment #programming #coding

Пікірлер: 128

  • @ByteGrad
    @ByteGrad8 ай бұрын

    Sorry for light mode everyone haha. Will use Eraser's dark mode next time. :) My Professional React & Next.js course is OUT NOW now! Find it here: bytegrad.com/courses/professional-react-nextjs -- this is the #1 resource to master the latest React & Next.js, my absolute best work.

  • @CookingForAlba-qh8nq

    @CookingForAlba-qh8nq

    8 ай бұрын

    proper psycho vibes ❤

  • @motehpro

    @motehpro

    7 ай бұрын

    Light mode has better contrast for me

  • @felicytatomaszewska2934

    @felicytatomaszewska2934

    6 ай бұрын

    It took me sometime & adjusting the settings to watch but thank you for the nice content... like always :)

  • @RoyGeurts-mh3fl

    @RoyGeurts-mh3fl

    6 ай бұрын

    Dutch Man Hi I am Roy boy geurts

  • @RoyGeurts-mh3fl

    @RoyGeurts-mh3fl

    6 ай бұрын

    Good night beautiful I'm going to bed hope you sleep well and wake up refreshed I like your little sidekick Smile

  • @bklynpeter
    @bklynpeter8 ай бұрын

    Amazing coverage of Zod use cases, and along the way, an amazing overview of the myriad data-flow possibilities in Next.js!!!

  • @ByteGrad

    @ByteGrad

    8 ай бұрын

    Thanks!

  • @henryhwhap
    @henryhwhap8 ай бұрын

    I really like your voice/tone. Its really calming and informative. Thank you.

  • @segunkonibire5433
    @segunkonibire54337 ай бұрын

    Yup, another well explained concept, great stuff. I try to watch all you videos, even if on stuff I tthink I already know. Thank you so much! 🔥

  • @HusamNasrullah
    @HusamNasrullah8 ай бұрын

    Amazing, you are a real best reference to seniors before juniors ❤ keep it up 🎉

  • @shash0_0
    @shash0_05 ай бұрын

    This is some very high quality content. You know your stuff!

  • @nurlanshukurov3864
    @nurlanshukurov38648 ай бұрын

    Sir, your explanations are cleanest I've seen. Please make more ts + reactjs videos. İf possible, about mapped types and keyof keyword

  • @RobertoDuransh
    @RobertoDuransh8 ай бұрын

    ok this vid is better thatnt 99% of any zod pay tutorial that i have seen. awesome work!

  • @ByteGrad

    @ByteGrad

    8 ай бұрын

    Thanks!

  • @joonatontti8398
    @joonatontti83983 ай бұрын

    Thanks a ton! Didn't realize how flexible tool Zod really is. The tip about env variables was especially welcomed! Didn't mind the repetition, as they say it's the mother of learning 😁

  • @dougfbf
    @dougfbf8 ай бұрын

    Thanks for sharing your knowledge with us. You're the best!

  • @zunairullah
    @zunairullah6 ай бұрын

    I love the flowchart of external data he made i wish i could had this before when i was learning javascript 6 years ago. This flow diagram every beginner of javascript should know

  • @SovitTamrakar
    @SovitTamrakar8 ай бұрын

    You are a hero.. I wish I could turn back and re-work on those projects again using Zod

  • @SumitSingh-wz3wt
    @SumitSingh-wz3wt7 ай бұрын

    Yes , these types of techniques can make our app bug free. Helpful content.

  • @danielwang4518
    @danielwang4518Ай бұрын

    Thank you sir, that is so great you covered everything we should know about zod with real life examples. You are legend.

  • @rangerboi9715
    @rangerboi97156 ай бұрын

    Loved your tutorial. THank you for this great content!!!

  • @olusanyaolamide9764
    @olusanyaolamide97648 ай бұрын

    I've not even watched this video but I know it's going to be an absolute blast, I recently went through your ultimate css course and it was also a blast, your previous video on Typescript was awesome and the Generics concepts doesn't look so strange anymore was actually quite confusing before I saw the video

  • @doronsages983
    @doronsages9838 ай бұрын

    that's great content, I've been waiting to this video specifically

  • @r4k4210
    @r4k42108 ай бұрын

    I need a video like this with hexagonal architecture! Nice video i love it!

  • @aleksandarspasov6815
    @aleksandarspasov68157 ай бұрын

    Beautiful work!

  • @prashlovessamosa
    @prashlovessamosa8 ай бұрын

    Thanks for sharing knowledge sir.

  • @mohammedelmoutaouakkil
    @mohammedelmoutaouakkil8 ай бұрын

    Thank you very much. your channel content is Pure Diamond

  • @bappybd
    @bappybd8 ай бұрын

    Awesome content

  • @a_maxed_out_handle_of_30_chars
    @a_maxed_out_handle_of_30_chars7 ай бұрын

    aah, simply the best thank you and subbed :)

  • @abyshekhar
    @abyshekhar2 ай бұрын

    Extremely useful video. Thanks a lot

  • @froxx93
    @froxx933 ай бұрын

    Although the video was a bit stretched by being too repetitive imo, the core info (the list of things where to use it) was really helpful. Thanks a lot!

  • @everyhandletaken
    @everyhandletaken8 ай бұрын

    already been using Zod lately & just wanted to watch this video to see if I was using it in a logical way, but.. I didn’t realise it had an enum type & I never thought about using it for env vars! I was using a separate library for that, for absolutely no reason, it turns out. Great video, thank you ☺️

  • @ByteGrad

    @ByteGrad

    8 ай бұрын

    Fwiw, it’s still a good idea to use a library for the env variables, the way I showed in this video is just an example - has some downsides in practice

  • @everyhandletaken

    @everyhandletaken

    8 ай бұрын

    @@ByteGrad it looked to provide what I am using (I think it is env-var lib) for at the moment, just basic checks & I would love to get rid of another dependency 🤔 My checks were basically mandatory, type (string or int, generally) & maybe positive/negative for int

  • @pedropaternostro9917
    @pedropaternostro99177 ай бұрын

    Great content, thank you for this. Just a word of advice, compare your audio volume to others on youtube, you might want to turn it up a bit.

  • @bambydeluxe

    @bambydeluxe

    6 ай бұрын

    OR as we say: I CANT HEAR YOU, YOU HAVE TO SPEAK LOUDER. Otherwise we cannot hear that damn valuable information you are sharing with us.

  • @alirabiei2344
    @alirabiei23447 ай бұрын

    your content is awesome man

  • @gmagats
    @gmagatsАй бұрын

    Thanks, very nice explanation!

  • @Kay8B
    @Kay8B8 ай бұрын

    I will watch this tomorrow because the white background is murdering my eyes but can tell this is gonna be awesome.

  • @RaulCarrasco-jd9sq
    @RaulCarrasco-jd9sq7 ай бұрын

    I enjoy your concepts.

  • @sohrabhossain5115
    @sohrabhossain51158 ай бұрын

    Thanks for sharing your knowledge with us. It's really helpful. One thing want to know, When you will publish your react and next.js project-based course? We are waiting for this.

  • @berkaycirak
    @berkaycirak8 ай бұрын

    Thanks for video. I wonder something about recording settings :) do you use OBS for screen recording, if yes what is your output settings because quality is so good

  • @gmjitendra
    @gmjitendra2 ай бұрын

    Excellent. thanks a lot on this zod video.

  • @teetanrobotics5363
    @teetanrobotics53635 ай бұрын

    Thank you for your awesome content. Request you to make a long course for TRPC. if possible, please include prisma and NextAuth as well.

  • @cangorkemgunes
    @cangorkemgunes2 ай бұрын

    Thanks for tutorial, even if I am a blind person now because of light mode, I learnt lots of things from the video.

  • @Leofmoura87
    @Leofmoura877 ай бұрын

    Great great GREAT content. Clean coder always care about it.

  • @Elmasinsanodefrefire726
    @Elmasinsanodefrefire7267 ай бұрын

    Great course.

  • @OlegKvyatkovsky
    @OlegKvyatkovsky8 ай бұрын

    Thanks for your videos

  • @wlancer8826
    @wlancer88266 ай бұрын

    Just came from Typescript Generics! Amazing video!! Don't actually know what Zod is, though like first~

  • @27sosite73
    @27sosite738 ай бұрын

    great vid ty mate

  • @27sosite73
    @27sosite738 ай бұрын

    thank you once again

  • @user-ru8hn9hb5c
    @user-ru8hn9hb5c8 ай бұрын

    He's back.

  • @user-mb7vg4be8e
    @user-mb7vg4be8e7 ай бұрын

    Very good content.

  • @swagfinger
    @swagfinger8 ай бұрын

    Very nice!

  • @abdelhameedhamdy
    @abdelhameedhamdy8 ай бұрын

    Awesome video

  • @jellyfish1772
    @jellyfish17727 ай бұрын

    thank you boss!

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd2 күн бұрын

    Thanks pleas keep posting videos like this

  • @knownartist
    @knownartist7 ай бұрын

    Hi! Thanks for the video, it was really helpful! Also, what is that autocomplete gray code strings in your video? Is it github copilot or some analog? I'm new to vscode, still learning.

  • @ElliottTheUnicorn
    @ElliottTheUnicorn8 ай бұрын

    thank you!

  • @anversadutt
    @anversadutt7 ай бұрын

    pls create trpc in-depth tutorials, thanks for the awesome content

  • @oabdulazeez
    @oabdulazeez6 ай бұрын

    I'm enjoying you bro....

  • @dennisgonzales9521
    @dennisgonzales95214 ай бұрын

    amazing!

  • @ShortCodeDev
    @ShortCodeDev8 ай бұрын

    awesome man. plz make a real based project in react native

  • @zlackbiro
    @zlackbiro8 ай бұрын

    You can use zod for validate state and forms. I didnt watch the entire video but i assumed you covered that. Zod is runtime library so he knows what are your data in production, typescript work in build time and doesnt even goes outside development, so your code is blind. Based on zod, you can do astonishing process of data validation and build things on top of it, like formik, react hook form, data fetching, filtering, etc, etc. I using Zod in node and i am so in love with it, so clean and easy. The best node js library ever made.

  • @uzainmubarak9735
    @uzainmubarak97358 ай бұрын

    what zod version were you using in this example?

  • @sbogdaniuk
    @sbogdaniuk5 ай бұрын

    Nice, thanks! QQ: Did u measured performance for React application, with Zod validation all over the place?

  • @pfcokelly
    @pfcokelly8 ай бұрын

    Great video! But Where was this a few weeks ago when I was stuck with API bug after bug.

  • @tokomnyori6730
    @tokomnyori673019 күн бұрын

    Excellent 🔥

  • @mariolazzari
    @mariolazzariАй бұрын

    Brillant!

  • @sulaimanshabbir
    @sulaimanshabbir6 ай бұрын

    Subscribing you and notification to all ❤🎉

  • @pranavrajveer3767
    @pranavrajveer37678 ай бұрын

    Hi @bytegrad. When is your nextjs course coming You said 30 september, not came till now

  • @DanielRios549
    @DanielRios5494 ай бұрын

    13:47 After Zod successfuly parse the product variable, this variable is sade to use, since the shape is valid, it could contain additional keys but the same is valid. But in the end I agree with you, it's better to use the validatedProduct variable, since Zod returns the data with the typing so you don't need Product type anymore, using Zod with simply don't need to create TS types manually but you still have typings, this a game changer

  • @yuvarajyuvi9691
    @yuvarajyuvi96918 ай бұрын

    Say if I am getting the data from an excel file , and assume it sends all fields as a string , and I know that some fields can be converted to number , so how can zod help me here?(will it parse automatically that string field to number if I use z.number() for the field)

  • @Fanaro
    @Fanaro7 ай бұрын

    Do one video on soft skills for React and/or Fullstack developers!

  • @user-if8cf5ni3y
    @user-if8cf5ni3y6 ай бұрын

    Is using zod in big project good practice? Zod also impact performace

  • @albinopepegas8391
    @albinopepegas83914 ай бұрын

    What theme are you using in VSCode?

  • @ThanHtutZaw3
    @ThanHtutZaw33 ай бұрын

    I can't use zod schema in two separated Backend and Frontend deployed to vercel (MEVN ) . So how can I access that zod schema in production ? Should I use mono repo ?

  • @gmd2171
    @gmd21718 ай бұрын

    what theme do you use? And can you teach us some system design or OOP or dsa anything as your teaching method is so good

  • @maurvick6777

    @maurvick6777

    8 ай бұрын

    One Monokai

  • @gerkim3046
    @gerkim304619 күн бұрын

    Hello ByteGrad and many thanks. QUESTION: At 41:40 you talked about validating environment variables. I have tried it but it does not work in NextJS. It always behaves as if the env variables are undefined even though process.env actually contains the variables. Please look into it. Once again thanks for the tutorial.

  • @regilearn2138
    @regilearn21388 ай бұрын

    would like to request advanced MERN(can be next) + redux + Typescript project.

  • @lp26197
    @lp261978 ай бұрын

    Please, I have a question. I am Front End and I worked on real projects in Next JS with Back End people, and I want to enter the field of Back End. Do you advise me to learn C# or javascript, it's a busy frame, I'm very confused, and people distract me Thank you

  • @doronsages983
    @doronsages9838 ай бұрын

    one comment, regarding optional chaining, you could also use it on a function call, and that way to avoid crash when the function itself doesnt exist: product?.price?.toFixed?.(2) but yea, that wont be the best solution i guess

  • @ByteGrad

    @ByteGrad

    8 ай бұрын

    Ah yea good point

  • @DamirSecki
    @DamirSecki8 ай бұрын

    if I remember anything from this video is "in shape we expect it to be" :P

  • @bambydeluxe
    @bambydeluxe6 ай бұрын

    I registered for your email-subscription. With my real e-mail-address. I don't know how else to say, how much I like your content.

  • @ByteGrad

    @ByteGrad

    6 ай бұрын

    Haha awesome!

  • @ryan.connaughton
    @ryan.connaughton8 ай бұрын

    Would love to watch this if it was in dark mode! Will wait til day time tomorrow maybe haha

  • @r34221
    @r342217 ай бұрын

    thank you so mutch i didnt know that its possible to tell zod that string could be a number😅 so basicly i have boilerplate code to do that

  • @fluntimes
    @fluntimes4 ай бұрын

    This channel is the best find on KZread of 2023 for me. This video is an excellent example of why. Brilliant - this video fills in many gaps that resulted in me failing a technical interview.

  • @markhristov7171
    @markhristov71718 ай бұрын

    What vscode theme are you using?

  • @maurvick6777

    @maurvick6777

    8 ай бұрын

    One Monokai

  • @r34221
    @r342217 ай бұрын

    i usually dont use direct infered type from zod i have model and azod schema then i write a convertor class to convert the data in a zod type to my model this way my presenter layer uses my model and when a change happens in an api i simply have to edit my convertor class instead of entire app

  • @user-sn4mn3ku9e
    @user-sn4mn3ku9e8 ай бұрын

    👍

  • @kgdjoking7822
    @kgdjoking78228 ай бұрын

    Hello new subscriber here. Btw what code assistant tool he using ?. Anyone ?

  • @antoniosgobio4190

    @antoniosgobio4190

    8 ай бұрын

    copilot

  • @zunnoorainrafi5985
    @zunnoorainrafi59858 ай бұрын

    these days I am curiously waiting for your emails

  • @coolmind2476
    @coolmind24762 ай бұрын

    Lets say an API returns an unknown object where I dont know the possible components. How to extract the components and their types from an unknown object?

  • @toastrecon
    @toastrecon8 ай бұрын

    As cool as all of this is, I think it's kind of insane that JS is such a flawed language that it requires an absolute mountain of plugins and transpilers and validators to make it safe to work with. Looking forward to the NextJS course!

  • @Danielo515

    @Danielo515

    8 ай бұрын

    Every language that interacts with the external world will require this care

  • @toastrecon

    @toastrecon

    8 ай бұрын

    @@Danielo515 but I think many languages have the features built in as part of the syntax?

  • @happy_thinking

    @happy_thinking

    8 ай бұрын

    The problem with that line of thinking is that there really isn't anything to compare Javascript with, in the sense of how wide JS adoption is. I do agree modern languages like Go or Rust are better, but if these two were used in a billion places then we might have some problems with them as well. The Javascript flaws are pretty well-known, but I wouldn't say custom solutions for certain problems are something unique to JS.

  • @genovo

    @genovo

    8 ай бұрын

    Domain specific validations will always be with us.

  • @omereker8824

    @omereker8824

    8 ай бұрын

    Everything you said is valid for the existence. Life is flawed and we need to learn how to make it “safe” for us.

  • @sssrikanthhh
    @sssrikanthhhАй бұрын

    What about yup?

  • @ness-ee
    @ness-ee8 ай бұрын

    … we have API contracts and integration tests. I want zod too

  • @cristitoderita3620
    @cristitoderita36208 ай бұрын

    The solution to API response changes is not using "whatever" library or using a bunch of if statements. The solution is communication between product manager, backend and frontend and establish clear tasks that bring changes. Using these types of techniques, you only sugar coating the problem and possibly hidding it all together. Why should my frontend code look messy with tons of checkings if the backend fails to do their job or lack of communication or tasks mis-correlation ? 3rd party Apis usually use versioning and are well documented when changed. Do not overcomplicate development

  • @gofullstack
    @gofullstack8 ай бұрын

    Dear Dart 🤣🤣🤣

  • @cubeunicorn4055
    @cubeunicorn40558 ай бұрын

    Hi sir why you delayed your launch? One month delay is huge😢

  • @ByteGrad

    @ByteGrad

    8 ай бұрын

    Just want to make it perfect haha :)

  • @archmad
    @archmad8 ай бұрын

    the issue actually was not solved. no typescript, with or with zod, you will get the error when data changed. instead use a ts schema generator or use create T3

  • @user-ks8un9hw9v
    @user-ks8un9hw9v7 ай бұрын

    Wish I would've found your content earlier.

  • @artyomtaranenko2267
    @artyomtaranenko22678 ай бұрын

    Valibot

  • @bibblebabl

    @bibblebabl

    7 ай бұрын

    Basically its the same thing but you have to import all validators manually instead `z.`

  • @vitya.obolonsky
    @vitya.obolonsky7 ай бұрын

    we should use a new feature every year))) zod, TS, BS, WTFS 🤣🤣🤣

  • @lirics5864
    @lirics58647 ай бұрын

    editor tutorial HAHAHA

  • @sillvvasensei
    @sillvvasensei8 ай бұрын

    Too quiet.

  • @Theokondak
    @Theokondak5 ай бұрын

    ATM Web development is such a bad sector to work. Less jobs, less benefits, fear of being laid off, and an ecosystem that requires so much studying and its so chaotic that it's impossible to keep up. And I havent evven mentioned AI.

  • @siriusmain1763

    @siriusmain1763

    2 ай бұрын

    True, it’s so over for most of us, junior devs especially 😢

  • @haiffy

    @haiffy

    19 күн бұрын

    Unless you live in a third world country like me😂 PHP developers are dominating here

  • @thecoolnewsguy

    @thecoolnewsguy

    4 күн бұрын

    ​@@haiffyto be honest, third world countries are much more desirable and hirable because they don't need such high salaries

  • @psmontte
    @psmontte2 ай бұрын

    You. Are repetitive,