個人的備忘録：Next.js × fetch で実装するシンプルなログイン機能の記録メモ

はじめに

本記事では、Next.js環境でのログイン処理の実装例として、handleUserLogin 関数のコードについて解説します。

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

ユーザーがログインフォームを送信した際に、バックエンド（FastAPI）と連携し、認証処理を行う役割を担っています。

書こうと思ったきっかけ

受講しているITスクールのハッカソンの開発の一環で作成したログイン機能について、自分自身の備忘録として、またチーム内での共有のために記事としてまとめました。

実際のコード

コード解説

ログイン処理の流れ

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

  try {
    const res = await fetch("http://localhost:8000/login", {
      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();
      alert(error.detail || "ログインに失敗しました");
    }
  } catch (err) {
    console.error("通信エラー:", err);
    alert("通信エラーが発生しました");
  }
};

解説

1. フォーム送信のキャンセル

e.preventDefault() によって、フォーム送信によるページリロードを防ぎ、SPAらしい挙動にしています。

2. fetchによるAPIリクエスト

• POST メソッドで http://localhost:8000/login にリクエストを送信。
• リクエストボディには email と password をJSON形式で含めています。

3. レスポンスの処理

• レスポンスが成功 (res.ok) の場合、データを取得して /home に遷移。
• 失敗した場合は、エラーメッセージをアラートで表示します。

4. エラー処理

• ネットワーク障害やCORSの問題などで fetch 自体が失敗したときのエラーハンドリングを catch 節で対応しています。

本番デプロイに向けた修正

• 本番環境ではAPIのURLを .env に定義し、次のように利用するのが望ましいです：

fetch(`${process.env.NEXT_PUBLIC_API_URL}/login`, {...})

• JWTトークンの保存やユーザー情報の状態管理など、認証後の処理も別途追加が必要になります。

まとめ

この関数は、Next.jsでのログイン処理の基本形であり、API連携、エラー対応、ページ遷移など一連の流れを備えて設計してみました...！

ログイン成功後の処理（トークン保存やユーザー状態の管理）も含めて、より実践的なアプリケーションへと発展させていきます。