GET APIを作る
一覧を返す API
前回の /api/health は、決まった1つの値を返すだけでした。今回は fleama の商品一覧を返す /api/items を作ります。返すものが配列になるだけで、書き方は同じです。
TypeScript
import { NextResponse } from "next/server";
const ITEMS = [
{ id: "1", title: "スニーカー", price: 4800, category: "shoes" },
];
export async function GET() {
return NextResponse.json(ITEMS);
}NextResponse.json は配列でもオブジェクトでもそのまま JSON にします。受け取ったページ側は await res.json() で配列として使えます。
絞り込みの条件を受け取る
API は「全部ください」以外の呼ばれ方もします。fleama なら「靴だけください」です。この条件は URL のうしろに ?category=shoes の形で付きます。
受け取るには、GET の第1引数の request を使います。request.url にはリクエストされた URL がまるごと入っているので、URL に渡して searchParams から読みます。
TypeScript
export async function GET(request: Request) {
const category = new URL(request.url).searchParams.get("category");
const shown = category ? ITEMS.filter((item) => item.category === category) : ITEMS;
return NextResponse.json(shown);
}searchParams.get は、その名前が付いていなければ null を返します。だから category があるときだけ絞り、無ければ全部返す、という書き分けになります。
ページ側は変わらない
呼ぶ側は fetch("/api/items") と fetch("/api/items?category=shoes") を使い分けるだけです。API の中身が増えても、ページの書き方は同じままです。
どこまでを API の仕事にして、どこからをページの仕事にするかは設計の話です。今回のように「絞り込みは API 側」にしておくと、あとでデータが1万件になっても、ページに全部を送らずに済みます。
演習
app/api/items/route.ts に、商品一覧を返す GET を書きます。