Hi Bruno, I know your channel isn't huge or anything at this moment in time, but your content is fantastic and super easy to follow along with. I really do appreciate the work you're doing and I hope you continue putting out these tutorials going forward. Much appreciated.
I'm very happy to know that 😍 this is a pattern I use quite a lot in my applications. Being able to use the same exact validations in the client and server is amazing 😍
As I said in some other comment, would be amazing if u keep uploading this kind of videos for NextJs. We all know NextJs will hit hard this year, so... content like this, tips and tricks are absolutly great! Also might be nice if u could create an "advanced" course, with some great tips. This channel has a bright future!
@@BrunoAntunesPT Tips like this one mate, a lot of us comes from express, this middleware stuff for next was an amazing discover. Would be cool, some advanced stuff, we all know react, so... learning some tricks and stuff for next would be cool!
At the moment I've been looking into Prismic 😊 I heard a lot of amazing stuff about Strapi but never had the chance to test it out (maybe in the near future 😃)
@@matiassal9763 I have also been moving some stuff away from TypeORM into Prisma. I still have some small concerns with Prisma, that's the only reason I don't have a video with Prisma yet =) Regarding Prismic it is a CMS - prismic.io/
@@BrunoAntunesPT Thank you Bruno for you quick reply. The video I ask you to make is nowhere I tried with examples provided by nextjs, but one I use that, it doesn’t preload pages
You are referring to next + redux persist? 😊 I don't use redux nowadays 😊 In the nextjs repository as you say they have some examples using redux, but I have been away from redux for a long time 😅
Nice video as always Bruno. I've just tried the concat method and it's saved my life. Super useful for merging schemas which fields are different in the client forms and in the API (for example 'repeat password' and 'accept terms' fields). Do you know if the validate middleware can be used with next-connect?, I don't know if the schema could be passed to it.
Hi Bruno, thanks for another great video! I'm wondering how I can use the property label inside the custom message? For example, something like: export const schema = object({ firstName: string().required(`${label} is required`).min(2).max(40).label("First name"), });
Thank you very much Alexandre 😊 If I understand correctly what you want, the closest thing I know is the fact you can override the default name/id in error messages: github.com/jquense/yup#mixedlabellabel-string-schema Not sure if that's what you want/need 😅
That way if in the future you change to another validation library, ideally you don't need to redo your tests 😊that way you have confidence you didn't break anything. In this case is not a form, but the idea is exactly the same 😅
Thank you my friend. I have been putting some ideas in paper for a unit testing series 😀 very very very early stages, like an alpha release of a game, but it will happen on day in the future 😂😂😂
At the moment I'm not using (or recommending) redux. Because of that, I don't have any redux tutorial in my plans (we never know the future, but for now is not planned) 😊
As always... it depends on your use case 😅 there's no one size fits all. Read what I'm going to say with a grain of salt: For most of the stuff we do in webapps usually useSwr and context are enough 😊 When I'm dealing with something complex that I can model as a state machine I can 100% recomend xstate 😊 github.com/davidkpiano/xstate
Sorry for the delay my friend 😀 I'm very happy you found the solution 😊😊😊 I was editing tomorrow's video about conditional props with React and typescript 😀😀😀😀
Hi Bruno. I love your videos. Thank you so much for this one. I'm using this approach for validating the data but I found a problem with it. When I try to update a record sending only its modified values, I get a validation error because some required fields are missing. How do you avoid this? Do you have two schemas, one for creating (POST) and the other for updating (PUT)?
thanks for this material, Do you know how I can validate a field with a rule that depends on itself? for example if I have a field called "name" and I want a rule to validate that if the "name" field is not empty, disable it?
Thank you 😀 You can have fields that depend on other fields, but I never tried it on a field that depends on itself... The code should be similar to this: github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/blob/master/src/pages/index.tsx#L45 Let me know how it goes 😊
Hello Neeraj, I already have 2 videos about authentication in this playlist: ruclips.net/p/PLYSZyzpwBEWS3vaMHM8cCJv6qv6DNzzA9 Let me know if you like them 😊😊 In the future I might create a video with passport and/or next-auth. Any preference between the 2 methods? 😃
@@BrunoAntunesPT Is there any video related login/signup using third party api...? Basically In my project for backend I'm using the Laravel and created some login and register api...Now I want to use those api with NextJs... So, now I'm searching for this type of video.....
That's actually something that is on my radar for a long while 😅😅 I'll need some time to prepare something like that but you can expect it sooner or later 😊
Bruno, I want to validate if the email already exists or not in the DB. So I used this YUP's test() method like this: email: string().required("Please enter a valid email.").email("Please enter a valid email.").test("emailExists", "Email address already exists.", checkEmailExists), In checkEmailExists() method i call /api/checkEmail and return true or false. BUT ISSUE IS: • I want to run emailExists validation only if the required & email validation is satisfied • I don't want to make api call on every key stroke, is there any way to add debounce in formik or yup?
I'm a bit confused. In this video I didnt use formik. Are you asking a more generic question not related with this video? 😊 If yes, let me know if what you want is this: github.com/jquense/yup/issues/503
I'm sorry to hear that my friend. In the nextjs github repository they have (I think) 10 or 11 examples with redux. None of those examples is what you want/need?
You'll receive the errors object in the body of the http response like any other response you do with fetch, for example 😊 you can then put that into react state and show to users 😊
@@BrunoAntunesPT Ahh yes I tried it using form action="/api/foo" which does not seem to allow me to stay on the same page.. but using xmlHttpRequest I can stay on the page, get the data and set state. Thank you :)
Aaa here's my burning question. What do you think about making a custom express server with nextjs like we do it with react? Can it be SSRed and deployed as easily as normal next project?
Well....you can do that, but it's not recommended :) One of the side-effects (if I can call it a side-effect) is that you no longer can deploy into vercel: nextjs.org/docs/advanced-features/custom-server The second "side-effect" is that you lose ASO (automatic static optimization) - This alone should be enough to try avoid having a custom server :) From their docs: "Before deciding to use a custom server please keep in mind that it should only be used when the integrated router of Next.js can't meet your app requirements. A custom server will remove important performance optimizations, like serverless functions and Automatic Static Optimization." I hope this answers your question :) If not, we can go a bit deeper :)
@@BrunoAntunesPT thanks for the answer. Basically answers it all. We have a large size project which requires a good 'Seo relationship' and alot of backend structuring. At first creating server and client(nextjs) separately seemed like a good idea cause squeezing everything into an app folder quickly becomes a mess. What would you recomend?
I have been working in large nextjs projects and I don't find it a mess, quite the opposite. I love the fact that my routes are mapped on the file system, so I don't spend time navigating my files, which is a huge time savior for me 😊 I guess it all depends on how you organize your application code 😊
It runs on your server at runtime before requests ONLY IF you use getInitialProps or getServerSideProps. If you use getStaticProps or normal components without any of those mentioned fetching methods, it only runs at build time in your build not runtime. The result is that it will be very very fast 😊 faster than your typical create react app 😊
Oh really? 😅 Can it be related with the fact I record in 4k and the font seems a bit more smooth? My editor says on the font "Consolas, 'Courier New', monospace" - - - is that what you have as well? 😊
@@BrunoAntunesPT Yeah, mine is same too. Oh right, 4K resolution might be the reason why your font looks a lot more smoother. Thanks for clearing the confusion! By the way, I have recently come across your videos and I absolutely love it. I love the way you explain things. You are Amazing Bruno! ❤
Hi Bruno, I know your channel isn't huge or anything at this moment in time, but your content is fantastic and super easy to follow along with. I really do appreciate the work you're doing and I hope you continue putting out these tutorials going forward. Much appreciated.
Thank you very much Kevin 😍 words like that give me motivation to keep going, thank you, thank you😊🤩
I'm trying to DRY up my Next.js project and this is **exactly** what I was looking for! Thanks, Bruno!
I'm very happy to know that 😍 this is a pattern I use quite a lot in my applications. Being able to use the same exact validations in the client and server is amazing 😍
As I said in some other comment, would be amazing if u keep uploading this kind of videos for NextJs.
We all know NextJs will hit hard this year, so... content like this, tips and tricks are absolutly great!
Also might be nice if u could create an "advanced" course, with some great tips. This channel has a bright future!
Thank you for your support my friend 😍 what kind of tips are you looking for? 😅
@@BrunoAntunesPT Tips like this one mate, a lot of us comes from express, this middleware stuff for next was an amazing discover.
Would be cool, some advanced stuff, we all know react, so... learning some tricks and stuff for next would be cool!
underrated channel
Thank you 😍 Hopefully one day we will grow 😅😅😅
This was exactly what I was looking for and you earned a subscriber
Thank you very much 😍😍
Clean presentation and clear explanation. As always 👍 👍
Thank you very much for your words 😍😍 very happy you enjoy my videos ♥️♥️
Why cant I like this video more than once?
Thank you soo much Radoslav ❤️❤️❤️ I'm very happy you enjoyed the video 😍😍
tks to bring that content, and tks to yup to make this library. It's good when the mistakes are showed =D
Thank you
awesome, I very like the build approach you have to explain good job
Thank you very much 😍
Hopefully you will make a series of nextjs + grapql :)
and strapi
At the moment I've been looking into Prismic 😊
I heard a lot of amazing stuff about Strapi but never had the chance to test it out (maybe in the near future 😃)
@@BrunoAntunesPT Did you mean Prisma? I am totally agree with that decision. Thanks!
@@matiassal9763 I have also been moving some stuff away from TypeORM into Prisma. I still have some small concerns with Prisma, that's the only reason I don't have a video with Prisma yet =)
Regarding Prismic it is a CMS - prismic.io/
Thanks bro, i missed you and your awesome videos ❤
Thank you Hamed 😍😍 I think I'm starting to have more free time again ♥️♥️♥️
Hi, Bruno, Thank you very much for your videos. They are awesome.
Thank you very much for your comment Mohd 😍
@@BrunoAntunesPT
Thank you Bruno for you quick reply.
The video I ask you to make is nowhere
I tried with examples provided by nextjs, but one I use that, it doesn’t preload pages
You are referring to next + redux persist? 😊 I don't use redux nowadays 😊
In the nextjs repository as you say they have some examples using redux, but I have been away from redux for a long time 😅
Nice video as always Bruno.
I've just tried the concat method and it's saved my life. Super useful for merging schemas which fields are different in the client forms and in the API (for example 'repeat password' and 'accept terms' fields).
Do you know if the validate middleware can be used with next-connect?, I don't know if the schema could be passed to it.
I reply to myselft: Yes, Schema can be include with next-connect.
IN API:
export default handler = nextConnect().use(validate(schema).post(...)
Middleware:
export default (schema) => async (req, res, next) => {
if (['POST', 'PUT'].includes(req.method)) {
try {
req.body = await schema.validate(req.body, { abortEarly: false });
} catch (e) {
return res.status(400).json({ error: e });
}
}
next();
}
Thank you Jorge 😀😀
Sorry, I only had a chance to see the comments now 😀 I'm very happy you found the answer 😀😀
YUP, with Formik in the heart))
You can bet that Oleksandr! For me YUP + Formik = Love ❤️ ahah
Hi Bruno, thanks for another great video!
I'm wondering how I can use the property label inside the custom message? For example, something like:
export const schema = object({
firstName: string().required(`${label} is required`).min(2).max(40).label("First name"),
});
Thank you very much Alexandre 😊
If I understand correctly what you want, the closest thing I know is the fact you can override the default name/id in error messages: github.com/jquense/yup#mixedlabellabel-string-schema
Not sure if that's what you want/need 😅
awesome content, as usual, Bruno! :D I have a quick question and wonder if you could help. Have you ever tried to write a unit test for yup?
Thank you 😀 yes, you don't unit test yup directly, you test your form 😊
That way if in the future you change to another validation library, ideally you don't need to redo your tests 😊that way you have confidence you didn't break anything.
In this case is not a form, but the idea is exactly the same 😅
@@BrunoAntunesPT That is what I've been doing! :D thanks, Bruno! keep rocking ✌✌
Thank you my friend.
I have been putting some ideas in paper for a unit testing series 😀
very very very early stages, like an alpha release of a game, but it will happen on day in the future 😂😂😂
@@BrunoAntunesPT you should do it! :D I'm definately will be keeping an eyes out on that series to see if I can pick a thing or 2 of you :D
Very, very well done, thank you
Thank you Jordan 😍
ありがとうございます！
Thank you very much ❤️
Please make a tutorial on nextJS with redux and redux-persist. I did not find out any tutorial on it.
At the moment I'm not using (or recommending) redux.
Because of that, I don't have any redux tutorial in my plans (we never know the future, but for now is not planned) 😊
@@BrunoAntunesPT which state management do you prefer for state management ?
As always... it depends on your use case 😅 there's no one size fits all.
Read what I'm going to say with a grain of salt: For most of the stuff we do in webapps usually useSwr and context are enough 😊
When I'm dealing with something complex that I can model as a state machine I can 100% recomend xstate 😊 github.com/davidkpiano/xstate
Hey Bruno! Great video. what will be the type of the handler if we use "next connect" handler...I can't find anything :)
Hey...got it :) It's NextHandler :)
Sorry for the delay my friend 😀 I'm very happy you found the solution 😊😊😊
I was editing tomorrow's video about conditional props with React and typescript 😀😀😀😀
Hi Bruno. I love your videos. Thank you so much for this one. I'm using this approach for validating the data but I found a problem with it. When I try to update a record sending only its modified values, I get a validation error because some required fields are missing. How do you avoid this? Do you have two schemas, one for creating (POST) and the other for updating (PUT)?
Another great one
Mister Bernard 🤩🤩 thank you very much mate 😀
easy! thx for explaining
Thank you Stan 😊
Thanks Bruno!
Thank you very much for watching the video 😊
Hi Bruno!! Is it possible to get it working without TypeScript?! Great job!! Tks
Thank you 😊
Yes, just remove the types and everything will work in jsx files as well 😊
damn.. great tutorial thanks!!
Thank you for the feedback 🙏😊
hi, nice video.
How can i validate a date with yup? i'm stuck and i tried with momentJs, but nothing...
Awesome Tutorials ++++++++++++++ Thank You
Thank you very much 😍
thanks for this material, Do you know how I can validate a field with a rule that depends on itself? for example if I have a field called "name" and I want a rule to validate that if the "name" field is not empty, disable it?
Thank you 😀
You can have fields that depend on other fields, but I never tried it on a field that depends on itself... The code should be similar to this: github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/blob/master/src/pages/index.tsx#L45
Let me know how it goes 😊
❤️
❤️❤️❤️
please make a video on nextjs authentication-related video
Hello Neeraj, I already have 2 videos about authentication in this playlist: ruclips.net/p/PLYSZyzpwBEWS3vaMHM8cCJv6qv6DNzzA9
Let me know if you like them 😊😊
In the future I might create a video with passport and/or next-auth. Any preference between the 2 methods? 😃
@@BrunoAntunesPT Is there any video related login/signup using third party api...?
Basically In my project for backend I'm using the Laravel and created some login and register api...Now I want to use those api with NextJs...
So, now I'm searching for this type of video.....
Yeah... I don't have any tutorial covering that specific use case 😊
Mr. Bruno if it is possible could you make videos about testing of Next JS apps, like Jest or others
Hello Ismoil 😊
At work I'm using jest and testing-library.com/docs/react-testing-library/intro/
Is that the "stack" you would like to see videos on? 😊
@@BrunoAntunesPT yes please))
That's actually something that is on my radar for a long while 😅😅 I'll need some time to prepare something like that but you can expect it sooner or later 😊
@@BrunoAntunesPT yes please
Bruno, I want to validate if the email already exists or not in the DB. So I used this YUP's test() method like this:
email: string().required("Please enter a valid email.").email("Please enter a valid email.").test("emailExists", "Email address already exists.", checkEmailExists),
In checkEmailExists() method i call /api/checkEmail and return true or false.
BUT ISSUE IS:
• I want to run emailExists validation only if the required & email validation is satisfied
• I don't want to make api call on every key stroke, is there any way to add debounce in formik or yup?
I'm a bit confused. In this video I didnt use formik. Are you asking a more generic question not related with this video? 😊
If yes, let me know if what you want is this: github.com/jquense/yup/issues/503
You also have this one which is very similar github.com/jquense/yup/issues/851
what about if i edit one field some think like datatable - inline edit then required fields requires that filled
Like we created a special case for POST schema you can create a special case for PUT schema 😊 the idea is exactly the same 😊
I am stuck with NextJS and Redux-Saga Persist. Would you please help?
I'm sorry to hear that my friend. In the nextjs github repository they have (I think) 10 or 11 examples with redux.
None of those examples is what you want/need?
Please add mongodb to this project and make api calls with swr , It will be really helpful
I'll keep that in mind 😉😉
how to present the errormessage from the server with html on the client?
You'll receive the errors object in the body of the http response like any other response you do with fetch, for example 😊 you can then put that into react state and show to users 😊
@@BrunoAntunesPT Ahh yes I tried it using form action="/api/foo" which does not seem to allow me to stay on the same page.. but using xmlHttpRequest I can stay on the page, get the data and set state. Thank you :)
Awesome 😀
Aaa here's my burning question. What do you think about making a custom express server with nextjs like we do it with react? Can it be SSRed and deployed as easily as normal next project?
Well....you can do that, but it's not recommended :)
One of the side-effects (if I can call it a side-effect) is that you no longer can deploy into vercel: nextjs.org/docs/advanced-features/custom-server
The second "side-effect" is that you lose ASO (automatic static optimization) - This alone should be enough to try avoid having a custom server :)
From their docs: "Before deciding to use a custom server please keep in mind that it should only be used when the integrated router of Next.js can't meet your app requirements. A custom server will remove important performance optimizations, like serverless functions and Automatic Static Optimization."
I hope this answers your question :) If not, we can go a bit deeper :)
@@BrunoAntunesPT thanks for the answer. Basically answers it all. We have a large size project which requires a good 'Seo relationship' and alot of backend structuring. At first creating server and client(nextjs) separately seemed like a good idea cause squeezing everything into an app folder quickly becomes a mess. What would you recomend?
I have been working in large nextjs projects and I don't find it a mess, quite the opposite.
I love the fact that my routes are mapped on the file system, so I don't spend time navigating my files, which is a huge time savior for me 😊
I guess it all depends on how you organize your application code 😊
@@BrunoAntunesPT thanks alot. It was helpful. Love ur channel ✌✌
Thank you @@gigakvachakhia4777 😍
In the next js, the same code runs in both the front end and the server. Does that not make it slow
This video is only about api routes, they only run on the server 😊
Or your are asking nextjs in general?
@@BrunoAntunesPT nextjs in general
for example context api it should be run just in client right? but in nextsjs it runs in client and server
It runs on your server at runtime before requests ONLY IF you use getInitialProps or getServerSideProps.
If you use getStaticProps or normal components without any of those mentioned fetching methods, it only runs at build time in your build not runtime. The result is that it will be very very fast 😊 faster than your typical create react app 😊
What Font are you using in your editor?
Default vscode font 😊 the only difference I have here is that I have zoomed it a fair bit, but this is default vscode 😊
@@BrunoAntunesPT Oh, for some unknown reason, your default Consolas font looks way more beautiful than my Consolas font. 😢
Oh really? 😅 Can it be related with the fact I record in 4k and the font seems a bit more smooth?
My editor says on the font "Consolas, 'Courier New', monospace" - - - is that what you have as well? 😊
@@BrunoAntunesPT Yeah, mine is same too. Oh right, 4K resolution might be the reason why your font looks a lot more smoother. Thanks for clearing the confusion! By the way, I have recently come across your videos and I absolutely love it. I love the way you explain things. You are Amazing Bruno! ❤
Wowwww 😍😍 soo nice to read that Siam, thank you very much 😀😀
i dont understand anything please help
What do you need help on? 😊 Is there a video I can do to help??
@@BrunoAntunesPT yes please like showing us step by step how to fix Yup to work again PLEASE
What do you mean by work again? Can you elaborate? 😊