Next.js API Route ガイド

dev/next-api-route-guide

Next.js App Routerのroute.tsで使うGET/POST、動的params、レスポンス例を固定スニペットで確認できます。

最終更新日 2026-07-03 ・ by yuzlrin

このツールでできること

Next.js API Route ガイドでは、Next.js App Routerのroute.tsで使うGET/POST、動的params、レスポンス例を固定スニペットで確認できます。
関連する観点として Next.js API、route.ts、APIルートを確認し、結果をコピーして別の作業に使えます。

結果

--- 基本 (app/api/hello/route.ts) ---
import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({ message: "Hello" });
}

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

--- 動的ルート (app/api/users/[id]/route.ts) ---
export async function GET(
  request: Request,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
  return NextResponse.json({ userId: id });
}

--- レスポンス ---
NextResponse.json(data, { status: 201 })
NextResponse.redirect(new URL("/", request.url))
new Response(null, { status: 204 })

--- ヘッダー ---
const headers = new Headers();
headers.set("Cache-Control", "max-age=60");
return NextResponse.json(data, { headers });

--- エラーハンドリング ---
try { ... } catch (e) {
  return NextResponse.json(
    { error: "Internal Server Error" },
    { status: 500 }
  );
}

使い方

結果欄の「基本」セクションで、app/api/hello/route.tsのGETとPOST例を確認します。
動的ルートでは、paramsがPromiseとして型付けされ、awaitしてidを取り出す形を見ます。
レスポンス、ヘッダー、エラーハンドリングの各セクションから必要なスニペットを選びます。
コピー後は、自分のNext.jsバージョンとルート構成に合わせてimportやstatusを調整します。

入力例・出力例

INPUT

GETの最小例

OUTPUT

export async function GET() { return NextResponse.json({ message: "Hello" }); }

INPUT

動的ルート app/api/users/[id]/route.ts

OUTPUT

const { id } = await params;

INPUT

204応答

OUTPUT

new Response(null, { status: 204 })

よくある利用シーン

Pages Routerのpages/apiではなく、App Routerのroute.ts形式へ書き換えるとき。
Next.js 16系の動的Route Handlerでparamsをawaitする型の形を確認したいとき。
JSON応答、リダイレクト、空レスポンスの書き方を同じ画面で見比べたいとき。
APIルートの雛形を作る前に、エラーハンドリングの短い例も一緒にコピーしたいとき。

結果確認のポイント

構文、引用符、改行、エスケープが利用先の仕様に合っているか確認してください。
Next.js API、route.ts、APIルートの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

本番の秘密情報、APIキー、パスワードは入力しないでください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

Next.js API Route ガイドの主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

FAQ

よくある質問

App RouterのAPI RouteはPages RouterのAPI Routeと何が違いますか？

App RouterではAPIルートを app/api/xxx/route.ts に配置し、GET・POST等のHTTPメソッドに対応する名前付きエクスポート関数（例：export async function GET(request: Request)）で実装します。Pages Routerの pages/api/xxx.ts でexport defaultするスタイルとは大きく異なります。

route.tsでリクエストのボディを取得するにはどうすればよいですか？

Web標準のRequest APIを使って const body = await request.json() でJSONボディを取得します。フォームデータは await request.formData()、テキストは await request.text() で取得できます。

動的なAPIルートはどのように作りますか？

app/api/users/[id]/route.ts のようにフォルダ名を角括弧で囲むと動的セグメントになります。ハンドラ関数の第2引数 { params } から params.id として値を取り出せます。

Next.js API Route ガイド

このツールでできること

使い方

入力例・出力例

よくある利用シーン

結果確認のポイント

注意点

データの扱い / プライバシー

よくある質問

関連ツール

Next.js API Route ガイド

このツールでできること

使い方

入力例・出力例

よくある利用シーン

結果確認のポイント

注意点

データの扱い / プライバシー

よくある質問

関連ツール