JWTログインAPIをNext.jsで実装する

Shadcn/uiとつなぐ認証基盤の第一歩

初回公開日2025/7/29

最終更新日2025/7/30

0. はじめに

本記事は、前回の「Shadcn/uiで作るログイン画面」の続編となります。ここでは UI だけではなく、実際にフォームから情報を送信して、JWTトークンを発行するログインAPIを実装します。

また、「JWTって何？ Next.js での認証方式とトークンの仕組みを徹底解説（超入門）」で解説したように、JWTはステートレスで軟弱性もある認証トークンです。この記事ではそれを前提に、ミニマムな構成で実装する方法を紹介します。

1. 目標と構成

今回は、ログインAPIを実装し、JWTを使ったログイン後のユーザー認証フローを構築することが目的です。

/api/login にログイン用APIを実装し、JWTを発行
localStorage にJWTを保存し、後続ページで利用
/dashboard ページでは、JWTを使って認証チェックを行い、ユーザー情報を表示
認証処理は AuthenticatedArea.tsx に共通化し、どのページでも再利用可能な設計に

下記の構成で、フロント〜バックエンドを含めた最小構成のJWT認証機能を実現します。

txt

📁 src
├── app
│   ├── login/page.tsx             ← UI（前回実装）
│   ├── api/login/route.ts         ← ログインAPI（今回実装）
│   ├── api/protected/route.ts     ← 認証付きAPI
│   ├── dashboard/
│   │   ├── page.tsx               ← ダッシュボード（SSRラッパー）
│   │   └── DashboardClient.tsx   ← トークン検証＋ユーザー表示
├── components
│   └── AuthenticatedArea.tsx     ← トークン検証の共通コンポーネント
├── lib
│   ├── jwt.ts                     ← JWTの署名・検証ユーティリティ
│   └── users.ts                   ← 仮ユーザーデータ（今後利用）

2. JWT生成・検証の基盤実装

まずは JWT を発行・検証する関数を lib/jwt.ts に実装します。ここでは jose ライブラリを使用します。

`jose`のインストール

joseライブラリとは？

jose は、Node.jsとブラウザの両方で使える JWTの生成と検証に特化した暗号ライブラリです。

SignJWT はトークンの発行に使用します
jwtVerify は受け取ったトークンが正しい署名かを検証します

下記のコマンドでインストールを実行します。

zsh

npm install jose

🔧 src/lib/jwt.ts のコード

認証制御をsrc/lib/jwt.tsを作成して下記のように記述します。今回は jsonwebtoken パッケージではなく、上記でインストールした、より軽量かつブラウザ対応も意識された jose パッケージを利用して JWT の署名・検証を行います。

ts : jwt.ts

import { SignJWT, jwtVerify } from "jose";

const secret = new TextEncoder().encode(process.env.JWT_SECRET || "secret-key");
const alg = "HS256";

// JWTの署名を行う関数（アクセストークン発行）
export async function signToken(payload: JWTPayload): Promise<string> {
  return await new SignJWT(payload)
    .setProtectedHeader({ alg })
    .setIssuedAt()
    .setExpirationTime("1h")
    .sign(secret);
}

// JWTの検証を行う関数（Cookieから読み取ったtokenを確認）
export async function verifyToken(token: string): Promise<JWTPayload | null> {
  try {
    const { payload } = await jwtVerify(token, secret);
    return payload as JWTPayload;
  } catch (e) {
    if (process.env.NODE_ENV === "development") {
      console.error(e); // 開発中だけログ出す
    }
    return null;
  }
}

// JWTペイロードの型（型安全に記述）
export type JWTPayload = {
  sub: string; // アカウントID（ログインに使うID）
  email: string; // 入力されたメールアドレス
  role?: string; // 今後RBACに使う可能性があるので任意で保持
  iat?: number; // 発行時刻（JWT標準）
  exp?: number; // 有効期限（JWT標準）
};

💡 コードの解説

secret の設定方法

const secret = new TextEncoder().encode(process.env.JWT_SECRET || 'secret-key')

process.env.JWT_SECRET： **.env**ファイルやVercel環境変数などに定義した「秘密鍵」です。
TextEncoder で Uint8Array に変換するのは jose ライブラリが求める形式のためです
.encode(...)：joseライブラリではUint8Array型のバイト列が必要なので、文字列をバイト配列に変換しています。

✅ 安全な process.env.JWT_SECRET の条件：

英数字 + 記号（ASCII文字のみ）
最低32文字以上（64〜128文字推奨）
Base64形式 or ランダム生成（openssl rand -base64 64など）

◯JWT_SECRETの作成と設定例：

これはmacOSなら普通に利用可能なコマンドだと思います：

zsh

openssl rand -base64 64

dotenv : env

JWT_SECRET=BIKG9f2KSsxj4lMT+iDl3BEgCg6PvURpqSUw8umE9g/ju/mUNi6DiEjOlM9bwz6GVo4+qhJUTUJWNxLzBkWRsQ==

🔒 `SignJWT` と `jwtVerify` の使い分け

SignJWT(payload)：トークンを生成（署名）するためのクラス
jwtVerify(token, secret)：受け取ったトークンを検証し、署名と有効期限を確認

`signToken()` の各処理の意味

new SignJWT(payload)
  .setProtectedHeader({ alg }) 
  .setIssuedAt() 
  .setExpirationTime('1h')  
  .sign(secret)  

new SignJWT(payload)：ペイロード（トークンの中身）をセットします。このときの payload は、JWTPayload 型で「sub（アカウントID）」「email」「role」などを含むオブジェクトです。
.setProtectedHeader({ alg })：使用する署名アルゴリズムを指定します（ここでは HS256）。
.setIssuedAt()：現在時刻（UNIX時間）を iat として付加します。
.setExpirationTime('1h')：トークンの有効期限を「1時間」に設定します。
.sign(secret)：最後に秘密鍵で署名し、安全なトークンとして返します。

この関数によって、改ざん不可な1時間有効のJWTが発行されます。

`verifyToken()` の役割

export async function verifyToken(token: string): Promise<JWTPayload | null> {
  try {
    const { payload } = await jwtVerify(token, secret);
    return payload as JWTPayload;
  } catch (e) {
    return null;
  }
}

この関数はトークンの整合性（署名・有効期限）を検証します。
失敗時は null を返すことで「未ログイン」扱いにできます。

⚠️ トークンが 改ざん されていたり、有効期限切れ の場合は catch に入り、ログイン済み扱いにはなりません。

次のステップでは、このトークンの発行と検証を行うAPIルート /api/login を実装し、ログイン処理を完成させていきます。

3. `/api/login` の実装：トークン発行API

ここからは、ログインフォームから送信された情報を受け取り、JWTを発行して返すAPIルート src/app/api/login/route.ts を作成します。

ts : route.ts

import { NextResponse } from "next/server";
import { signToken } from "@/lib/jwt";

// 仮のユーザーデータ（デモ用）
const dummyUser = {
  accountId: "demoaccount0123",
  email: "demo@example.com",
  password: "password0123456", // 本番ではハッシュ化必須
  role: "admin",
};

export async function POST(req: Request) {
  const body = await req.json();
  const { accountId, email, password } = body;

  // 入力値の検証（実際はZodやDB連携が必要）
  if (
    accountId !== dummyUser.accountId ||
    email !== dummyUser.email ||
    password !== dummyUser.password
  ) {
    return NextResponse.json({ error: "認証に失敗しました" }, { status: 401 });
  }

  // JWTのペイロード
  const payload = {
    sub: dummyUser.accountId,
    email: dummyUser.email,
    role: dummyUser.role,
  };

  // トークン発行
  const token = await signToken(payload);

  // クライアントに返す（今回はJSONで返却。Cookie保存ではない）
  return NextResponse.json({ token });
}

🔰 コードの解説

📥 `POST(req: Request)` とは？

Next.js App Routerでは、app/api/... フォルダ以下の route.ts に GET() や POST() を定義することでAPIエンドポイントを実装します。

ここではログインフォームからPOSTされたデータを受け取りたいので、POST() を使います。

🧪 `dummyUser` で仮ログイン検証

const dummyUser = {
  accountId: 'demo123',
  email: 'demo@example.com',
  password: 'password123',
  role: 'admin'
}

実際のアプリではデータベースからユーザー情報を取得して照合しますが、今回は簡易デモとして固定ユーザー情報を直接コードに記述しています。

✅ 入力値をチェックしてJWTを発行

if (accountId !== dummyUser.accountId || ...) {
  return 401
}

ログイン失敗時は HTTPステータス401 Unauthorized を返します

const payload = { sub, email, role }

signToken() 関数に渡す payload には、ユーザーを一意に特定するために sub（アカウントID）を含めます

🔐 今回は Cookie 保存ではない理由

今回はトークンを HttpOnly Cookie に保存するのではなく、フロントエンド側で localStorage に保存する設計にしています。

その理由は以下の通りです：

初学者が JWT の仕組みを「目で見て理解」しやすくするため
localStorage に保存すれば、開発者ツールからトークンの中身が確認できる
Cookie + HttpOnly 方式は本番向けだが、CSRF対策やトークン無効化処理など複雑さが増す
今回の記事では「最低限のログイン処理」に焦点をあて、後続記事でセキュアな保存方法に拡張予定

✅ 本番環境では、セキュリティの観点から HttpOnly Cookie + SameSite=Strict + Secure による保存が推奨されます。

次はこのAPIをフロントエンドのLoginForm.tsxから呼び出し、実際にフォームから認証 → トークン保存 → リダイレクトの流れを作っていきます。

4. `LoginForm.tsx` からトークンを受け取り保存する

フロントエンドのログインフォームから、先ほどの /api/login API を呼び出して、認証成功時には JWT を localStorage に保存し、失敗時にはエラーメッセージを表示します。

Shadcn/uiで作るログイン画面で作成した src/components/LoginForm.tsx に追記していきます。

diff : LoginForm.tsx

"use client";

import { useState } from "react";
+ import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { loginSchema } from "@/lib/schema"; // ログインスキーマ
import { z } from "zod";
import {
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Eye, EyeOff } from "lucide-react";

export default function LoginForm() {
  const form = useForm<z.infer<typeof loginSchema>>({
    resolver: zodResolver(loginSchema),
    defaultValues: {
      accountId: "",
      email: "",
      password: "",
    },
  });

+   const router = useRouter();
+   const [error, setError] = useState("");

  const [showPassword, setShowPassword] = useState(false);

  function onSubmit(values: z.infer<typeof loginSchema>) {
+     setError("");
+     fetch("/api/login", {
+       method: "POST",
+       headers: {
+         "Content-Type": "application/json",
+       },
+       body: JSON.stringify(values),
+     })
+       .then(async (res) => {
+         if (!res.ok) {
+           const { error } = await res.json();
+           setError(error || "ログインに失敗しました");
+           return;
+         }
+         const { token } = await res.json();
+         localStorage.setItem("token", token);
+         router.push("/dashboard");
+       })
+       .catch(() => {
+         setError("通信エラーが発生しました");
+       });
  }

  return (
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(onSubmit)}
        className="mx-auto max-w-md space-y-4 pt-4 pb-10"
      >
        <FormField
          control={form.control}
          name="accountId"
          render={({ field }) => (
            <FormItem>
              <FormLabel>アカウントID</FormLabel>
              <FormControl>
                <Input
                  data-testid="accountId"
                  placeholder="CORP000123456"
                  autoFocus
                  {...field}
                />
              </FormControl>
              <FormMessage data-testid="accountId-error" />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>メールアドレス</FormLabel>
              <FormControl>
                <Input
                  data-testid="email"
                  type="email"
                  autoComplete="email"
                  placeholder="your@email.com"
                  {...field}
                />
              </FormControl>
              <FormMessage data-testid="email-error" />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="password"
          render={({ field }) => (
            <FormItem>
              <FormLabel>パスワード</FormLabel>
              <div className="flex items-start gap-2">
                <FormControl>
                  <Input
                    {...field}
                    data-testid="password"
                    type={showPassword ? "text" : "password"}
                    autoComplete="current-password"
                    placeholder="半角英数字15文字以上"
                  />
                </FormControl>
                <Button
                  data-testid="password-toggle"
                  type="button"
                  size="icon"
                  variant="outline"
                  onClick={() => setShowPassword((prev) => !prev)}
                  aria-label={
                    showPassword
                      ? "パスワードを非表示にする"
                      : "パスワードを表示する"
                  }
                  className="shrink-0 cursor-pointer"
                >
                  {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
                </Button>
              </div>
              <FormMessage data-testid="password-error" />
            </FormItem>
          )}
        />
        <Button
          data-testid="submit"
          type="submit"
          className="mt-4 w-full cursor-pointer"
        >
          ログイン
        </Button>
+         {error && <p className="mt-2 text-sm text-red-500">{error}</p>}
      </form>
    </Form>
  );
}

🔰 コードの解説：この実装の各ポイント

🧪 `fetch("/api/login")` の使い方

第2引数で method: POST を指定し、body にJSON形式のログイン情報を送信
headers に Content-Type: application/json を指定しないと Express/Next 側が解釈できない

🧠 `res.ok` とは？

HTTPステータスが200系（成功）であれば true、それ以外（400/500系など）は false になります
認証失敗時には 401 を返す設計なので、ここで弾ける

💾 `localStorage.setItem("token", token)` の意味

ブラウザのローカルストレージにJWTトークンを保存します
これにより、後続のAPIリクエストなどでトークンを付与する実装が可能になる（※今回はまだ未実装）

✅ なぜ `localStorage` に保存？

今回は Cookie 保存を行っていないため、トークンの保持先をフロントエンド側で持つ必要がある
localStorage に保持すれば、次回のリクエストで fetch ヘッダーに Authorization をつけるなどの操作ができる

🔁 `router.push("/dashboard")`

認証成功時にダッシュボードページ（仮）へ遷移します
実際の画面がまだ存在しない場合は page.tsx を用意してください（仮でもOK）

🧾 `<LoginForm />` 側の表示追加

送信ボタンの下に エラー表示 <p> を1行追加しています：

tsx

{error && <p className="text-sm text-red-500 mt-2">{error}</p>}

次は、この保存されたトークンを使って「保護されたAPI」を呼び出す方法や、ログイン中ユーザーの状態を表示する Dashboard ページの構築に進みます。

5. `/dashboard` ページの構築と保護APIの呼び出し

ログイン後に遷移する /dashboard ページでは、次の処理を行います：

localStorage から JWT トークンを取得
API /api/protected にトークンを付けて送信
トークンの有効性を検証し、ユーザー情報を表示

このようにして「ログイン済みユーザーだけがアクセスできる保護ページ」を構築します。

6. APIルート `/api/protected` の実装

まずはバックエンド側から。新しいAPIエンドポイントを作成し、トークンを検証してユーザー情報を返すようにします。 src/app/api/protected/route.tsを下記の内容で作成します。

ts : route.ts

import { NextRequest, NextResponse } from "next/server";
import { verifyToken } from "@/lib/jwt";

export async function GET(req: NextRequest) {
  const authHeader = req.headers.get("Authorization");
  const token = authHeader?.replace("Bearer ", "");

  if (!token) {
    return NextResponse.json(
      { error: "トークンがありません" },
      { status: 401 },
    );
  }

  const payload = await verifyToken(token);

  if (!payload) {
    return NextResponse.json({ error: "無効なトークンです" }, { status: 401 });
  }

  return NextResponse.json({ user: payload });
}

🔍 詳細解説：API 側の役割

🔸 `req.headers.get("Authorization")`

クライアントから送られてくる Authorization ヘッダー（"Bearer トークン文字列"）を取得します。
形式は Authorization: Bearer eyJhbGciOi... のようになっています。

🔸 `replace("Bearer ", "")`

ヘッダーの中から "Bearer " の部分を取り除き、実際のトークン文字列だけを抽出します。
スペースや大文字・小文字を間違えると正しく動作しないため注意が必要です。

🔸 `verifyToken(token)`

src/lib/jwt.ts で定義したトークン検証関数を使って、有効なトークンかどうかを確認します。
有効であればユーザー情報（JWTのペイロード）を返し、無効であれば null を返します。

🔸 返却内容

トークンが正しければ user 情報（sub, email, roleなど）を JSON で返します。
トークンがない、または無効な場合は 401 Unauthorized エラーを返してガードします。

7. `/dashboard` ページの実装

ログイン成功後、ユーザーを /dashboard に遷移させる構成にします。このページでは「トークンが正しいことを検証」し、ログインユーザー情報（メールアドレスや権限など）を表示します。

ただし、今回の実装ではJWTをlocalStorageに保存しているため、サーバー側（``）ではトークンを取得できません。したがって、クライアントコンポーネント側でトークンの読み取り・検証処理を行う必要があります。

この目的のため、以下のようなファイル構成にします：

txt

📁 src
├── app
│   └── dashboard
│       ├── page.tsx               ← サーバーサイドは構造だけ
│       └── DashboardClient.tsx    ← トークンを検証し、ユーザー情報を表示

📄 `page.tsx`（サーバーコンポーネント）

src/app/dashboard/page.tsxは下記のようになります。

tsx

import DashboardClient from "./DashboardClient";

export default function DashboardPage() {
  return <DashboardClient />;
}

このファイルはSSRで処理されますが、認証処理は含みません。単にクライアントコンポーネントをラップして返すだけです。

🧠 なぜこの構成？

localStorageはサーバー側で使えない：localStorage はブラウザ専用APIのため、Node.js側ではアクセスできません
JWTをlocalStorageに保存している限り、認証チェックはクライアントで行う必要がある
将来Cookieに保存する場合でもこの構成を活かせる：APIを通じて認証確認する設計は、Cookie方式にも応用可能です

8. `DashboardClient.tsx` の役割と構成

この DashboardClient.tsx に以下の機能を実装します：

localStorageからJWTを取得
/api/protected にリクエストを送り、ログイン状態を検証
成功時：メールアドレスや権限情報を表示
失敗時：ログイン画面へのリダイレクト、またはエラー表示

また、この処理は今後 /users などのページでも再利用できるよう、汎用コンポーネント AuthenticatedArea.tsx に切り出す予定です。

このように、Next.js + JWT認証構成においては「サーバーで無理に認証処理をしない」ことで、構成の明快さとクライアント制御の柔軟性を最大化できます。

次は、DashboardClient.tsx の具体的なコード実装と、ログイン後ユーザーの状態管理UIを構築していきます。

9. `DashboardClient.tsx` の実装

ここでは、/dashboard ページでログイン済みユーザーの情報を表示するためのクライアントコンポーネント DashboardClient.tsx を実装します。

トークンの取得と認証チェックの処理は、他ページでも再利用可能にするため、共通コンポーネント src/components/AuthenticatedArea.tsxに切り出して利用します。

txt

📁 src
├── components
│   └── AuthenticatedArea.tsx ← トークンの読み取り＆API検証
├── app
│   └── dashboard
│       ├── page.tsx
│       └── DashboardClient.tsx ← ここで認証結果を使ってUIを構成

✅ AuthenticatedArea.tsx の内容

トークンの読み取り＆API検証を行うsrc/components/AuthenticatedArea.tsxを作成します。

tsx

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";

export type User = {
  sub: string;
  email: string;
  role?: string;
};

type Props = {
  children: (user: User) => React.ReactNode;
};

export default function AuthenticatedArea({ children }: Props) {
  const [user, setUser] = useState<User | null>(null);
  const [checking, setChecking] = useState(true);
  const router = useRouter();

  useEffect(() => {
    const token = localStorage.getItem("token");
    if (!token) {
      router.replace("/");
      return;
    }

    fetch("/api/protected", {
      method: "GET",
      headers: {
        Authorization: `Bearer ${token}`,
      },
    })
      .then(async (res) => {
        if (!res.ok) {
          throw new Error("Unauthorized");
        }
        const { user } = await res.json();
        setUser(user);
        setChecking(false);
      })
      .catch(() => {
        localStorage.removeItem("token");
        router.push("/");
      });
  }, [router]);

  if (checking) return <p>読み込み中...</p>;
  if (!user) return null; // ログインページにリダイレクト中

  return <>{children(user)}</>;
}

🔍 解説：このコンポーネントの目的

処理	説明
`localStorage.getItem("token")`	ローカルストレージに保存されたトークンを読み込む
`/api/protected` に fetch	JWT が有効かどうかをAPI経由で検証
`children(user)` で描画	ログイン済みユーザーを親コンポーネントに引き渡す

✅ DashboardClient.tsx の内容

tsx

"use client";

import AuthenticatedArea, { User } from "@/components/AuthenticatedArea";

export default function DashboardClient() {
  return (
    <AuthenticatedArea>
      {(user: User) => (
        <div className="max-w-xl mx-auto pt-10">
          <h1 className="text-2xl font-bold mb-4">ダッシュボード</h1>
          <p>ようこそ、{user.email} さん</p>
          <p className="text-sm text-muted-foreground mt-2">
            アカウントID: {user.sub}
          </p>
          {user.role && <p>ロール: {user.role}</p>}
        </div>
      )}
    </AuthenticatedArea>
  );
}

🧠 解説：このコンポーネントの責務

認証に成功したユーザーの情報を受け取り、UIに表示します
AuthenticatedArea が認証状態を判断・管理してくれるため、ロジックは完全に分離可能
User 型に基づいて安全に email や role を参照できます

このようにすることで：

トークン検証処理を一箇所に集約
複数ページで使い回せる
認証結果を明確に props として扱える
今後の RBAC 対応やログインユーザーの切り替えにも対応しやすくなる

10. テスト実行

ここまで作成したら、基本的な動作の確認です。

zsh

npm run dev

ログイン画面が起動したら、src/app/api/login/route.tsで記載したテスト用のログインデータを入力します。

txt

  accountId: "demoAccount0123",
  email: "demo@example.com",
  password: "passWord0123456",

ログイン成功時：

ログイン失敗時：

上記のような2パターンの状態を確認できます。また、ログインしていない状態（別ブラウザなどチェックするほうが簡単かも）で直接http://localhost:3000/dashboardでダッシュボードページを表示しようとしてもログイン画面へ遷移することを確認可能です。

これで、ログイン機能のUIを利用した実践ができました。まだDB連携などこれからですが、まずは基本の流れが体験できました。

次回はこの AuthenticatedArea を使って、/users ページでログイン済みユーザー一覧を管理者限定で表示するUIの構築に進みます。

参考文献

この記事の執筆・編集担当

松本孝太郎

DELOGs編集部/中年新米プログラマー

ここ数年はReact&MUIのフロントエンドエンジニアって感じでしたが、Next.jsを学んで少しずつできることが広がりつつあります。その実践記録をできるだけ共有していければと思っています。

この記事の更新履歴

2025/7/30
`src/components/AuthenticatedArea.tsx`を修正：ログイン状態でないときに、ログイン後の画面（/dashboard）へ直接アクセスした際、エラーメッセージではなくログイン画面へ遷移させるように修正
2025/7/29
初回公開

▼ 関連記事

JWTで保護されたユーザ一覧を実装する ─ 認証・ロール・一覧表示まで

ログイン済みのadminユーザーだけにユーザー一覧を表示します。JWT認証の保護ルートとRBAC導入の第一歩となる実装

2025/7/30公開

JWTで保護されたユーザ一覧を実装する ─ 認証・ロール・一覧表示までのイメージ

JWTって何？ Next.js での認証方式とトークンの仕組みを徹底解説（超入門）

JWTについて、Next.jsでのログイン認証に使えるトークンの仕組みと活用方法を初心者向けに丁寧に解説

2025/7/23公開

JWTログインAPIをNext.jsで実装する

0. はじめに

1. 目標と構成

2. JWT生成・検証の基盤実装

joseのインストール

joseライブラリとは？

🔧 src/lib/jwt.ts のコード

💡 コードの解説

secret の設定方法

🔒 SignJWT と jwtVerify の使い分け

signToken() の各処理の意味

verifyToken() の役割

3. /api/login の実装：トークン発行API

🔰 コードの解説

📥 POST(req: Request) とは？

🧪 dummyUser で仮ログイン検証

✅ 入力値をチェックしてJWTを発行

🔐 今回は Cookie 保存ではない理由

4. LoginForm.tsx からトークンを受け取り保存する

🔰 コードの解説：この実装の各ポイント

🧪 fetch("/api/login") の使い方

🧠 res.ok とは？

💾 localStorage.setItem("token", token) の意味

✅ なぜ localStorage に保存？

🔁 router.push("/dashboard")

🧾 <LoginForm /> 側の表示追加

5. /dashboard ページの構築と保護APIの呼び出し

6. APIルート /api/protected の実装