🚀

【Next.js和訳】API Routes/Introduction

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

この記事について

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

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

API Routes

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

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

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

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 の他の使用例としては、以下のようなものがあります。

  • 外部サービスの URL をマスキングする(例:https://company.com/secret-url の代わりに /api/secret)。
  • 外部サービスに安全にアクセスするために、サーバーの環境変数を使用する。

警告

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

関連

次にすべきことについては、以下のセクションをお勧めします。

https://nextjs.org/docs/api-routes/api-middlewares

https://nextjs.org/docs/api-routes/response-helpers

https://nextjs.org/docs/basic-features/typescript#api-routes

Discussion

ログインするとコメントできます