🚀

【Next.js和訳】API Routes/Introduction

2021/10/02に公開・約2,600字

この記事について

この記事は、API Routes/Introductionの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

例

API ルートは、Next.js でAPIを構築するためのソリューションを提供します。

pages/apiフォルダ内のファイルはすべて/api/*にマッピングされ、pageではなく API エンドポイントとして扱われます。これらはサーバーサイドのみのバンドルで、クライアントサイドのバンドルサイズを増やすことはありません。

例えば、次の API ルートpages/api/user.jsは、ステータスコード200のjsonレスポンスを返します。

export default function handler(req, res) {
  res.status(200).json({ name: "John Doe" })
}

API ルートを動作させるには、デフォルトで関数（リクエストハンドラ）をエクスポートし、以下のパラメータを受け取る必要があります。

API ルートで異なる HTTP メソッドを扱うには、リクエストハンドラでreq.methodを次のように使用します。

export default function handler(req, res) {
  if (req.method === "POST") {
    // POSTリクエストの処理
  } else {
    // その他のHTTPメソッドの処理
  }
}

API エンドポイントを取得するには、このセクションの最初にある例を参照してください。

新しいプロジェクトでは、API ルートを使って API 全体を構築することができます。既存の API がある場合は、API ルートを通じて API への呼び出しを転送する必要はありません。API Routes の他の使用例としては、以下のようなものがあります。

API ルートはCORS ヘッダーを指定しないため、デフォルトでは同一オリジンのみとなります。リクエストハンドラをCORS ミドルウェアでラップすることで、この動作をカスタマイズすることができます。
API ルートは、next exportと一緒に使用することはできません。