🧠 概要

Next.jsのApp Router構成に対応するため、
フロント中心のstate管理から「APIベースの設計」に変更した。

🎯 初学者向けに一言

Next.jsでは「サーバーでやるか、ブラウザでやるか」を分けるのが重要

🧱 ① API Routeの実装

// app/api/tasks/route.ts

// タスク一覧（仮DB）
let tasks: any[] = [];

// GET: タスク一覧取得
export async function GET() {
  // tasks配列をJSONとして返す
  return Response.json(tasks);
}

// POST: タスク作成
export async function POST(req: Request) {
  // リクエストボディを取得
  const body = await req.json();

  // バリデーション（textがない場合はエラー）
  if (!body.text) {
    return Response.json(
      { error: "invalid" },
      { status: 400 }
    );
  }

  // 新しいタスクを作成
  const newTask = {
    id: Date.now(), // 一意なID
    text: body.text, // タスク内容
    tag: body.tag,   // タグ
  };

  // 配列に追加（仮DB）
  tasks.push(newTask);

  // 作成したタスクを返す
  return Response.json(newTask);
}

💡 ポイント

・Next.jsはAPIも同じプロジェクトで作れる
・簡易バックエンドとして使える

🧱 ② Client ComponentでPOST

"use client"; // ← このファイルはブラウザで動く

// タスク追加関数
const addTask = async () => {

  // APIにPOSTリクエストを送る
  await fetch("/api/tasks", {
    method: "POST",
    body: JSON.stringify({
      text: task, // 入力されたタスク
      tag: tag,   // 入力されたタグ
    }),
  });

  // 🔥 重要：APIから再取得
  await fetchTasks();
};

💡 ポイント

・setStateで直接追加しない
・必ずAPIを通す

🧱 ③ 再フェッチ処理