【Next.js】ZodとReact Hook Formを使ってフォームバリデーションを実装してみた - Qiita

はじめに この記事では、React(Next.js)で最近よく聞くTSと相性が良いZodとReactでよく使われているReact Hook Formを使ってフォームバリデーションの実装をしてみて、とても簡単で便利だなと感じたので紹介してみます。 今回やること Next.jsでZodとReact Hook Formを組み合わせて使用してログイン機能のフォームバリデーションを実装してみます。 前提(準備) 今回下記２つを用いてフォームバリデーションを実装します。 自分の環境はフロントにReact(Next.js)とサーバーサイドにAPIサーバとしてPHP(Laravel)を使っています。 Zod 型安全なスキーマ定義とバリデーションを提供するライブラリ React Hook Form React のフォーム状態管理を簡単にするためのカスタムフックを使用できるライブラリ 実際にやってみる 概要