Next.js App Router で Route Handler（API）を作る

概要

App Router では app/api/ 配下に route.ts を置くことで HTTP エンドポイントを定義できる。 GET / POST などのメソッド名でエクスポートすると、対応するリクエストを処理できる。

ディレクトリ構成

app/
  api/
    items/
      route.ts       ← GET, POST
      [id]/
        route.ts     ← GET, PUT, DELETE

GET エンドポイント

// app/api/items/route.ts
import { NextResponse } from "next/server";

type Item = { id: number; name: string };

const items: Item[] = [
  { id: 1, name: "サンプル A" },
  { id: 2, name: "サンプル B" },
];

export async function GET() {
  return NextResponse.json(items);
}

POST エンドポイント

// app/api/items/route.ts（追記）
import { NextRequest, NextResponse } from "next/server";

export async function POST(request: NextRequest) {
  const body = await request.json() as { name: string };

  if (!body.name) {
    return NextResponse.json(
      { error: "name は必須です" },
      { status: 400 }
    );
  }

  const newItem: Item = { id: Date.now(), name: body.name };
  items.push(newItem);

  return NextResponse.json(newItem, { status: 201 });
}

動的ルート（[id]）

// app/api/items/[id]/route.ts
import { NextRequest, NextResponse } from "next/server";

type Params = { params: Promise<{ id: string }> };

export async function GET(_req: NextRequest, { params }: Params) {
  const { id } = await params;
  const item = items.find((i) => i.id === Number(id));

  if (!item) {
    return NextResponse.json({ error: "Not Found" }, { status: 404 });
  }

  return NextResponse.json(item);
}

ポイント

• NextResponse.json() でレスポンスを返す
• request.json() でリクエストボディをパース
• ステータスコードは第 2 引数の { status } で指定
• 動的ルートの params は Next.js 15 から Promise になった点に注意