🚀

【Next.js和訳】API Routes/Introduction

2 min read

この記事について

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

この記事は、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

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