API ルート

API ルートは Next.js でAPIを構築する簡単な方法を提供しています。

pages/apiフォルダ内にあるすべてのファイルは /api/* にマッピングされ、pageの代わりに API エンドポイントとして扱われます。

例えば、以下の API ルート pages/api/user.jsjson レスポンスを扱います:

export default (req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'application/json');
  res.end(JSON.stringify({ name: 'John Doe' }));
};

API ルートを使用するためには、関数(リクエストハンドラ)をデフォルトとしてエクスポートする必要があり、この関数は以下の 2 つのパラメータを受け取ります:

API ルートで異なる HTTP メソッドを処理するには、次のようにリクエストハンドラの req.method を使うことができます:

export default (req, res) => {
  if (req.method === 'POST') {
    // POSTリクエストを処理します
  } else {
    // その他のHTTPメソッドを処理します
  }
};

API エンドポイントを取得するには、このセクションの最初にある例のどれかをご覧ください。

API ルートはCORSヘッダーを指定しません。つまり、標準では同一オリジンのみとなります。cors ミドルウェアでリクエストハンドラをラップすることで挙動をカスタマイズすることができます。

API ルートを使用しても、クライアントサイドのバンドルサイズが大きくなることはありません。これらはサーバーサイドのみのバンドルです。

関連事項

以下のセクションを次に読むことをお勧めします: