【フォーム開発実践】認証やお問い合わせフォームをNext.js/RHF/zod等のモダン技術を使って開発する実践講座
Webアプリ/サイト開発で必須になるフォーム開発。モダンな技術である「Next.js」「react-hook-form」「zod」「shadcn/ui」を使って型定義やバリデーションチェック済みの堅牢性の高いフォームの作り方をご紹介します。
4.50 (42 reviews)
504
students
4 hours
content
Sep 2024
last update
$19.99
regular price
What you will learn
Nextjs(React)環境で実践的なフォーム実装ができる
react-hook-formとzodを利用して型安全なフォームが作成できる
間違った入力をした時のバリデーションエラーが出せるようになる
shadcn/uiを利用して綺麗なフォームUIコンポーネントが作成できる
zodResolverを利用してRHFにスキーマ型定義を適用できる
カスタムフックスに切り出してリファクタリングできる
useCallbackの意味と使い方が理解できる
Resendを利用してお問い合わせメール送信機能が実装できる
メールに送るテンプレートコンポーネントが作成できる
メール送信APIが実装できる
Postmanを利用してAPIテストができる
画像ファイル送信用に型定義とフォーム追加ができる
zodのcustom()やrefine()の意味と実装方法が分かる
画像サイズ・種類を制限するバリデーションチェックができる
formDataとjsonの使い分けと意味が理解できる
メール送信中のローディング状態を管理できる
トースターを導入して送信成功か失敗か判断できるようになる
Supabase Authenticationでユーザー認証(新規登録/ログイン)管理ができる
html/tailwindcssで認証フォームをスクラッチで開発できる
ユーザー状態を管理してバリデーションチェックの出力変更ができる
パスワード変更フォームと実装ができる
共通するコンポーネントは別ファイルで分けて使いまわしができる
ユーザーテーブルを作成してユーザー管理ができる
RLSの意味とポリシー変更でアクセス制御ができる
既に同じユーザーが存在した場合はバリデーションエラーを出せる
Supabaseから送られてくるメール確認内容を修正できる
ユーザーログアウト機能が実装できる
ユーザー状態を管理するライブラリやHooksが理解できる
Screenshots
5760128
udemy ID
1/12/2024
course created date
3/2/2024
course indexed date
Bot
course submited by