Next.js API Routesで同時リクエストするとエラーが発生する問題

問題の概要

API Routesの間違った実装により、単一のリクエストを送った場合は正しく動作するが、同時にリクエストを送った場合は処理中にエラーが発生する場合がありました。

理由

API Routesは裏でNode.jsが動いていますが、そのNode.jsはシングルスレッドのイベントループで動作するため、API Routes内でグローバルな状態を共有すると競合が発生することがあります。
例えば以下の場合は、エラーが発生する可能性があります。
グローバルの場合はリクエスト間でデータが共有されます。

let counter = 0; // グローバル

export default function handler(req, res) {
  counter++;  // ここでデータ競合が発生する可能性あり
  res.status(200).json({ counter });
}

改善策

グローバルで管理せずに、関数内で定義することで改善しました。

export default function handler(req, res) {
  let counter = 0;
  counter++;  // ここでデータ競合が発生する可能性あり
  res.status(200).json({ counter });
}