Next.js API Routes Validation using YUP: Share frontend and backend validation using YUP schemas
In this video we will add validation to our Next.js API Routes using YUP. In order to achieve that in a simple and reusable way we will create a validation middleware that uses YUP for schema validation.
Because we are using YUP, we can now share our validations across front-end and back-end. Form libraries like formik and react-hook-form work very well with YUP.
I hope you enjoy the video :)
--- URLs
GitHub URL: https://github.com/bmvantunes/youtube...
GitHub commit history: https://github.com/bmvantunes/youtube...
Video introduction to Next.js API Routes: • Next.js Tutorial - Part 4 | API Route...
Video using next-connect (Express like API): • Next.js API Routes using next-connect
Next.js Tutorial Playlist: • Next.js Tutorial
YUP documentation: https://github.com/jquense/yup
HTTP Verbs/Methods description: https://restfulapi.net/http-methods/
---- Timeline:
00:00 Introduction
01:23 Yup validation schema description
02:00 Yup string validation
02:28 Yup number validation
02:58 Yup email and url validation
03:30 Yup array validation
05:23 Infer TypeScript interface/Type from the Yup validation schema
06:15 Validate using the schema
07:44 Why/How create a validation middleware for the Next.js API Routes
09:00 Code starts
09:25 How to create a middleware in Next.js API Routes
11:52 Use Yup inside our Validation middleware
13:42 Remove unwanted properties from our objects using yup
14:34 Make yup validations strict by the type
15:15 Convert any case to camelCase, for example personal_website to personalWebsite
16:49 Show all validation errors, not only the first (abortEarly: false)
17:37 Extend our schemas with ID for our put methods without having to pass two different schemas to our middleware
21:14 Copy validation middleware to its own file
22:10 Recommend next-connect to avoid switch case in our API routes
23:12 Outro
----
Follow me on:
Twitter: / bmvantunes
Dev.to: https://dev.to/bmvantunes
Website: https://brunoantunes.net
GitHub: https://github.com/bmvantunes
LinkedIn: / bmvantunes
Watch video Next.js API Routes Validation using YUP: Share frontend and backend validation using YUP schemas online without registration, duration hours minute second in high quality. This video was added by user Bruno Antunes 09 March 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 13,241 once and liked it 402 people.