Next.jsのAPIルートとは？フロントもバックも一体で作れる強力な仕組み

2025年6月7日

Next.jsは、Reactベースのフレームワークとして有名ですが、実はバックエンド的な処理も書けるのをご存知でしょうか？
その仕組みが「APIルート（API Routes）」です。

この記事では、Next.jsのAPIルートの基本から使い方、注意点までを解説します。

✅ APIルートとは？

APIルートとは、サーバーサイドで実行される関数（APIエンドポイント）をNext.jsの中に作れる仕組みです。
Expressなどの別サーバーを用意しなくても、同じプロジェクト内でAPIを定義できます。

📁 構成イメージ：

bashコピーする編集する/pages
  └─ /api
       └─ hello.ts

上記の hello.ts は /api/hello というAPIエンドポイントになります。

🔧 APIルートの基本構文

以下は、最もシンプルなAPIルートの例です：

tsコピーする編集する// pages/api/hello.ts
import type { NextApiRequest, NextApiResponse } from 'next'

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({ message: 'Hello from API Route!' })
}

📝 解説：

NextApiRequest：リクエスト情報（GETやPOST、ヘッダーなど）
NextApiResponse：レスポンスを返すためのオブジェクト
res.status().json()：JSONを返す

📮 HTTPメソッドごとの分岐も可能！

以下のように、1つのファイルでGETとPOSTなどを使い分けられます：

tsコピーする編集するexport default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    res.status(200).json({ method: 'GET' })
  } else if (req.method === 'POST') {
    res.status(200).json({ method: 'POST', body: req.body })
  } else {
    res.setHeader('Allow', ['GET', 'POST'])
    res.status(405).end(`Method ${req.method} Not Allowed`)
  }
}

📦 フロントエンドからAPIルートを呼び出す

Next.jsのクライアントサイドからfetchで簡単に呼べます。

tsコピーする編集するconst res = await fetch('/api/hello')
const data = await res.json()
console.log(data.message) // → "Hello from API Route!"

💡 ユースケース例

APIルートは以下のような用途に便利です：

フォームの受信と送信（メール送信など）
データベースとのやり取り（SupabaseやFirebaseと連携）
外部APIとの仲介（サーバー側でAPIキーを使う）
S3やCloudinaryへのファイルアップロード

⚠️ 注意点・制限

項目	内容
サーバーサイドのみ実行	クライアント側のJSには含まれません
ミドルウェアは不可	Expressのように中間処理をグローバルで差し込む機能はなし
`app/`ディレクトリでは使用不可（v13以降）	`app/`以下にはAPIルートは置けません。`pages/api/`を使いましょう
実行環境	Vercelではサーバレス関数として、ローカルではNode.jsサーバーで動きます