はじめに

Next.js と FastAPI を使ってユーザー登録機能を実装している中で、フロントエンドとバックエンドのAPIインターフェースの不一致によって、登録処理が失敗していることに気づきました。

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

書こうと思ったきっかけ

受講しているITスクールのハッカソンの開発の一環で、登録機能の不具合を解決した経験を忘れないように記事にまとめています。

内容

今回扱ったのは、Next.jsで作られた一般ユーザー登録ページです。このフォームでは「名前」「メールアドレス」「パスワード」を入力して送信します。

バックエンドのFastAPI側では、user_name, email, password の3つを含むJSON形式のデータを受け取ることを想定していました。

しかし、元のフロントエンド実装では user_name が送られておらず、登録処理が失敗していました。

そのため、以下のように修正を行いました：

body: JSON.stringify({
  email,
  password,
  user_name: userName, // ← FastAPIと合わせるために追加
})

バックエンドの一部コード抜粋

new_user = User(
    email=user_data.email,
    user_name=user_data.user_name,
    password_hash=hash_password(user_data.password)
)
db.add(new_user)
db.commit()

User(...) で新しいユーザーオブジェクトを作成
db.add(new_user) でセッションに追加
db.commit() でDBに永続化

実際のコード

これにより、FastAPIの /register エンドポイントと正しく連携できるようになり、ユーザー登録後に /home ページへリダイレクトされるようになりました...！

まとめ

フロントエンドとバックエンド間のAPI仕様の不一致は、よくある落とし穴です。

特にスキーマが定義されているバックエンド（今回で言えば UserRegister）に合わせて、正しくデータを送信する必要があります。

今回の経験は、開発中のバグ発見・修正にとても役立ちました...！