🚀
【Next.js和訳】API Routes/Introduction
この記事について
この記事は、API Routes/Introductionの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
API Routes
例
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 ルートを動作させるには、デフォルトで関数(リクエストハンドラ)をエクスポートし、以下のパラメータを受け取る必要があります。
-
req
: http.IncomingMessageのインスタンスと、あらかじめ用意されたいくつかのミドルウェア -
res
: http.ServerResponseのインスタンス、およびいくつかのヘルパー関数
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 の他の使用例としては、以下のようなものがあります。
- 外部サービスの URL をマスキングする(例:
https://company.com/secret-url
の代わりに/api/secret
)。 - 外部サービスに安全にアクセスするために、サーバーの環境変数を使用する。
警告
- API ルートはCORS ヘッダーを指定しないため、デフォルトでは同一オリジンのみとなります。リクエストハンドラをCORS ミドルウェアでラップすることで、この動作をカスタマイズすることができます。
- API ルートは、
next export
と一緒に使用することはできません。
関連
次にすべきことについては、以下のセクションをお勧めします。
Discussion