SupabaseとVercelのリージョンがズレていたことが原因で通信が遅くなっていた問題

結論

SupabaseプロジェクトのリージョンとVercelのFunction Regionを東京に合わせることで解決

原因

Next.js on VercelとSupabaseの構成で、ページ表示やAPIのレスポンスがなんとなく遅かった。

Supabase側は最初から東京リージョンで作っていたが、Vercel Functions（API RoutesやServer Actionsなど）は特に設定しなかったためデフォルトのiad1（米国）で実行されていた。

• Supabase: 東京
• Vercel Functions: 米国ワシントンD.C

という組み合わせになっており、DBアクセスのたびに日本 → 米国のFunction → 日本のSupabase、と太平洋をまたぐ通信が発生していた。

対処法

Vercel FunctionsのリージョンをSupabaseと同じ東京（hnd1）に合わせる。

ダッシュボードで設定する場合

プロジェクトの Settings → Functions → Function Regions から東京（Tokyo, hnd1）を選択するだけ。今回はこれで対応した。

vercel.jsonで設定する場合

コードで管理したい場合はregionsを指定する。

vercel.json

{
  "regions": ["hnd1"]
}

まとめ

SupabaseとVercelはどちらもリージョンをデフォルトのまま使い始められてしまう分、両者のリージョンが揃っているかは意識しないと見落としがち。DBアクセスを伴う構成で表示が遅いと感じたら、まずFunctionsとDBのリージョンが一致しているか確認するとよさそう。