16. Route Handlers — APIエンドポイントを作る

route.ts というファイルに GET や POST という名前の関数をエクスポートすると、そのフォルダのパスが API エンドポイントになります。app/api/posts/route.ts なら「/api/posts」に GET や POST リクエストを送れるようになり、レスポンスは NextResponse.json(...) で返します。

ページではなく JSON などのデータそのものを返したいときに使います。スマホアプリや外部サービスにデータを提供する、Webhook を受け取る、といった「画面を持たない入口」が必要な場面が典型です。

なお、自分のページにデータを表示するだけなら、わざわざ API を作る必要はありません。Route Handler は「ブラウザの画面以外からも呼ばれる入口」が必要なときの道具、と覚えておくと使いどころを誤りません。

サンプルコード(フレームワーク環境が必要なため表示のみ)

// app/api/posts/route.ts → /api/posts というエンドポイントになる
import { NextResponse } from "next/server";

const posts = [
  { id: 1, title: "はじめての投稿" },
  { id: 2, title: "2つめの投稿" },
];

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

export async function POST(request: Request) {
  const body = await request.json();
  return NextResponse.json(body, { status: 201 });
}

公式ドキュメントで詳しく ↗