Route Handler
API をアプリの外に置かなくてよくなる
React実践では、データを取る先が別のサーバーでした。fleama のアプリと API が別々にあって、ブラウザからそちらに取りにいく形です。
Next.js では、同じプロジェクトの中に API を置けます。これを Route Handler と呼びます。app/ の中に route.ts という名前でファイルを置くと、そのフォルダのパスがそのまま API の URL になります。
プレーンテキスト
app/api/health/route.ts -> /api/health
app/api/items/route.ts -> /api/itemsフォルダが URL になる決まりは、ページのときとまったく同じです。違うのはファイル名だけで、画面を返したいなら page.tsx、データを返したいなら route.ts です。同じフォルダに両方は置けません。
route.ts の中身
書くのは関数です。ただし export default ではなく、HTTP メソッドと同じ名前で名前付きに出します。GET で取り出し、POST で受け取る、というふうに分かれます。
TypeScript
import { NextResponse } from "next/server";
export async function GET() {
return NextResponse.json({ status: "ok" });
}NextResponse.json は、渡した値を JSON にして返すための道具です。next/server から import します。返し忘れるとエラーになるので、必ず return を付けます。
ページから呼ぶ
ページ側は普通の fetch です。同じアプリの中にあるので、ホスト名は要らず /api/health のような相対パスで書けます。
TypeScript (JSX)
const res = await fetch("/api/health");
const data = await res.json();自分で書いた GET が呼ばれたかどうかは、画面に結果が出たかどうかで分かります。ここが Route Handler の気持ちのよいところです。
演習
app/api/health/route.ts に、アプリが動いていることを返す API を作ります。