できない.dev

Route Handler

別名: ルートハンドラ / route.ts / route.js

Next.js の App Router で HTTP リクエストを直接受けるための仕組み。
app/ 配下に route.ts を置き、GET や POST という名前で関数を export すると、そのセグメントが API エンドポイントになる。

公開:

定義

Route Handler は、Next.js の App Router で HTTP リクエストを直接受け取るための仕組みです。app/ 配下のセグメントに route.ts(または route.js)を置き、GET / POST / PUT / PATCH / DELETE / HEAD / OPTIONS という名前の関数を export すると、そのセグメントの URL が API エンドポイントになります。
Web 標準の Request を受け取り Response を返すため、フレームワーク独自のリクエスト型を覚える必要がありません。

詳細

同じセグメントに page と route を同時に置くことはできません。
ページを描画するか、リクエストに応答するかのどちらかです。

app/
  api/
    health/
      route.ts      ← GET /api/health
  blog/
    page.tsx        ← /blog(ページ)
// app/api/health/route.ts
export async function GET() {
  return Response.json({ ok: true });
}

書き出した関数名が許可されたメソッド名と一致しない場合、そのメソッドには応答しません。OPTIONS を自分で書かなかったときは Next.js が既定の応答を組み立てます。
ランタイムは既定で Node.js ですが、export const runtime = "edge" で Edge runtime に切り替えられます。

よくある誤解

  • page.tsx から fetch される内部関数: Route Handler は独立した URL を持つエンドポイントで、外部からも呼べます。
  • middleware の代わり: middleware(16 以降は proxy)はリクエストが目的のルートへ届く前に挟まる層で、応答本体を組み立てる Route Handler とは役割が違います。

関連

ルーティング方式そのものは App Router、サーバー側で動く描画単位は Server Component を参照してください。
ブラウザから叩いて CORS で弾かれる症状は Next.js の Route Handler で CORS エラーになる にまとめています。

この記事は役立ちましたか?