Course curriculum

    1. 本講座で学べること

    2. 本講座の完成品ソースコード

    1. 本セクションの完成品のデモ

    2. まずはNext.jsでプロジェクトの雛形を作成しよう

    3. shadcn/uiをプロジェクトに導入してみよう

    4. お問い合わせフォームコンポーネントの作成を開始しよう

    5. shadcn/uiのフォームを使ってフォームのレイアウトを作ろう

    6. react-hook-formをフォームに導入しよう

    7. zodライブラリを使ってフォームスキーマ定義をしよう

    8. zodResolverを導入してスキーマの型定義を適用させよう

    9. zodResolverを導入してスキーマの型定義を適用させよう

    10. 送信の確認とバリデーションチェックができているか確認しよう

    11. useMailForm()のカスタムフックスを作ってリファクタリングしよう

    12. useCallbackでカスタムフックス内の関数をメモ化しよう

    13. Resendを利用してメール送信機能の実装を始めよう

    14. Gmailに送られるテンプレートコンポーネントを作成しよう

    15. Gmail送信APIを作ってみよう

    16. Postmanを使ってメール送信APIテストをしてみよう

    17. メールフォームからGmail送信APIを叩いてテストしてみよう

    18. フォーム入力した内容が正常に送信されるかチェックしてみよう

    19. ファイル送信項目をお問い合わせフォームに追加しよう

    20. ファイル型定義やバリデーションチェックをスキーマに追加しよう

    21. 画像サイズ・種類を制限するバリデーションチェックも含めよう

    22. ファイルデータを文字列と一緒に送信するにはどうすれば良いのか

    23. ファイルバリデーションエラー状態を修正しよう

    24. formDataを使ってfileを送信できる形にしてみよう

    25. api側でformDataの情報を取り出してアタッチしてみよう

    26. Fileオブジェクトからバッファオブジェクトを取り出して画像ファイル送信してみよう

    27. 送信時にローディング状態を実装しよう

    28. 送信成功時にトースターを出してみよう

    29. 開発したお問い合わせフォームをデプロイしてみよう

    1. 本セクションの完成品デモ

    2. Next.jsでプロジェクトの雛形を作成しよう

    3. 認証ページに遷移するためのページを作ろう

    4. １からユーザー新規登録ページをTailwindCSSで作成しよう

    5. Input入力コンポーネントを作成しよう

    6. Propsを付与してコンポーネントを受け取る側で動的に変更させよう

    7. 送信ボタン用コンポーネントを作成しよう

    8. react-hook-formを導入してフォームの状態管理をしよう

    9. zodを導入して型定義とバリデーションチェックをしよう

    10. カスタムフックスを呼び出してバリデーションチェックができているか確認しよう

    11. ログインページを作成しよう

    12. 新規登録とログインページ間を移動できるリンクを設置しよう

    13. Supabase Authenticationでユーザー管理を始めよう

    14. ユーザーテーブルを作成してユーザー情報を保存できるようにしよう

    15. Supabaseへユーザーを登録・管理してみよう

    16. 新規登録時にユーザー情報をテーブルへ保存しよう

    17. RLSポリシーを変更してテーブルにアクセスできるようにしよう

    18. 既に同じユーザーが存在した場合はそのバリデーションエラーを出そう

    19. 重複エラーをユーザーに分かりやすい形で表示しよう

    20. ユーザーログイン機能を実装しよう

    21. メール未確認やユーザーが存在しない場合のバリデーションチェックをしよう

    22. 実際にメール確認をしてサービスにログインしてみよう

    23. getSessionを使って本当にログインできているか確認してみよう

    24. メール確認を促すページを作成しよう

    25. Supabaseから届くメール本文内容を修正しよう

    26. ユーザーログアウト機能を実装しよう

    27. ユーザー状態は状態管理ライブラリやHooksで管理しよう

    1. ボーナスレクチャー

About this course

  • 19,800円
  • 59回のレッスン
  • 4時間の動画コンテンツ

Discover your potential, starting today