個人的備忘録：FastAPIと連携したユーザー登録処理をNext.jsで実装してみたメモ

はじめに

本記事では、Next.jsとTailwind CSSを使用して構築されたユーザー登録フォームのコードについて解説します。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

クライアントコンポーネントとして動作し、APIへの登録リクエストを行う機能を備えています。

書こうと思ったきっかけ

受講しているITスクールのハッカソンの開発の一環で作成した登録機能のコードです。後で再利用したり、チーム内で共有できるようにするため、備忘録として記事にまとめました。

実際のコード

コード解説

全体構成

• "use client"：クライアント側で動作することを明示。
• useState：フォーム入力（ユーザー名・メールアドレス・パスワード）を管理。
• useRouter：登録成功時に /home へリダイレクト。
• fetch：FastAPIなどのバックエンドに対し、POST リクエストでユーザー情報を送信。
• Tailwind CSS：各コンポーネントの装飾やレイアウトに使用。

1. 状態管理

const [userName, setUserName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

各入力項目の状態を保持し、変更されるたびに更新されます。

2. ルーター遷移

const router = useRouter();

登録成功後に /home ページへ遷移するために使用されます。

3. 登録処理

const res = await fetch("http://localhost:8000/register", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ email, password }),
});

• fetch 関数でAPIに非同期リクエストを送信。
• 成功時はレスポンスデータを受け取り、/home に遷移。
• 失敗時はエラー内容をアラート表示。

※ 現状 userName はフォームにあるがAPIに送信されていないため、必要であれば body に含める修正が必要です。

4. UI構成

• <form> 内にそれぞれの <input> 要素を配置し、スタイルはTailwind CSSで整えられています。
• 戻るリンク (<Link>) と登録ボタン (<button>) が並列で表示されており、UXにも配慮された設計です。

まとめ

この登録フォームは、Next.jsとTailwind CSSによるシンプルながら実用的な実装例です。状態管理・API通信・ページ遷移・UIの整備など、フロントエンドの基本的な要素を含んでおり、今後の開発にも応用できるベースとなります。

おまけ:実際のコード

src/app/register/page.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";

export default function Register() {
  const [userName, setUserName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const router = useRouter();

  const handleRegister = async (e: React.FormEvent) => {
    e.preventDefault();

    try {
      const res = await fetch("http://localhost:8000/register", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          email,
          password,
        }),
      });

      if (res.ok) {
        const data = await res.json();
        console.log("登録成功:", data);
        router.push("/home");
      } else {
        const error = await res.json();
        console.error("登録失敗:", error);
        alert(error.detail || "登録に失敗しました");
      }
    } catch (err) {
      console.error("通信エラー:", err);
      alert("通信エラーが発生しました");
    }
  };

・・・（省略）