🚀

【Next.js和訳】API Routes/Introduction

2021.10.02に公開

この記事について

株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。

この記事は、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と一緒に使用することはできません。