Next.js API Routes Validation using YUP: Share frontend and backend validation using YUP schemas

Опубликовано: 09 Март 2021
на канале: Bruno Antunes

13,241

402

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

Смотрите видео Next.js API Routes Validation using YUP: Share frontend and backend validation using YUP schemas онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Bruno Antunes 09 Март 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 13,241 раз и оно понравилось 402 людям.

336