🤪

req.json()とは

に公開
Next.js
API
JSON
パース
req
tech

短く言うと req.json() は「req（リクエスト本体）に入っているボディを JSON として読み取り、JSの値にパースして返すメソッドです。

そもそもJSONとは？

JSON は、データをテキストで表現するための軽量フォーマット。

使える値の型：object {} / array [] / string / number / boolean / null

仕様のポイント

  • 文字列は ダブルクォート必須（"key" : "value"）

  • undefined、NaN、Infinity、Date、BigInt は JSONとして無効（Dateは文字列として送るのが一般的）

典型例

{
  "id": "u_123",
  "name": "Haru",
  "roles": ["user", "admin"],
  "active": true,
  "createdAt": "2025-10-25"
}

APIとJSONの関係（リクエスト/レスポンス）

HTTP API では、クライアント⇄サーバ間のデータの“梱包材” として JSON がよく使われます。
軽量なため通信の際にデータをJSONにして送る。

リクエストでの使い方

  • ボディにJSONを入れる → サーバはそれを req.json() 等でパース
  • 必ず Content-Type を付ける：Content-Type: application/json
  • 必要なら受け取りフォーマットを示す：Accept: application/json

クライアント（fetch）の例

await fetch("/api/notices", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",  
    "Accept": "application/json"
  },
// JS値 → JSON にしてる
  body: JSON.stringify({
    message: "Hello",
    type: "info",
    startAt: Date.now(), 
  }),
});

サーバ（Next.js Route Handler）の例

export async function POST(req: Request) {
  try {
    const payload = await req.json();            // JSON→JS値にしてfirebaseなどに保存
    const parsed = NoticeSchema.parse(payload); 
   
    return Response.json({ ok: true }, { status: 201 });
  } catch (e) {
    return new Response("Invalid JSON or schema", { status: 400 });
  }
}

JSON → JS値 とは

JSON文字列（テキスト）をJavaScriptの実データ（オブジェクト/配列/数値/真偽/null）
に“パースして”変換することを指します。
実装的には JSON.parse(...) や await req.json() がそれです。

const json = '{"id": 1, "name": "Haru", "active": true, "tags": ["nextjs", "ts"], "since": "2025-10-01"}';

const obj = JSON.parse(json);
// obj: { id: 1, name: "Haru", active: true, tags: ["nextjs","ts"], since: "2025-10-01" }

レスポンスでの使い方

サーバはJSONで返すのが一般的（Response.json(data) など）

return Response.json({ data: items, nextCursor: "abc" });

ざっくり整理

  • HTTPは運び方：ボディに何を入れるかは任意。入れるものの種類を Content-Type で宣言します。

送る側：JSON.stringify　Jsonにして送信

受ける側：req.json()　　取得したデータをJSON → JS値

Discussion