Next.jsのビルドが外部DBで止まったとき、「空表示で通す」を選んだ話

今日は、Next.jsで作っている予約サイトの本番ビルドを確認した。

機能追加そのものは完成していたが、ビルド時に一部の一覧ページがSupabaseへ接続しようとして処理が止まった。原因はコードの文法ではなく、ビルド環境には対象データベースの接続情報を置いていないことだった。

仮の接続情報やダミーデータを入れれば、ビルドだけ通すことはできる。ただ、それでは本番と異なる状態を「成功」と見なしてしまう。今回は、ページの役割ごとに失敗時の扱いを分けることにした。

一般公開の一覧ページは、接続情報が揃っている場合だけデータを取得し、未設定なら空配列を返してページ自体は表示する。React側もデータが0件の状態を正常系として扱い、説明文を出すようにした。一方で、予約処理や管理画面などデータが必須の機能は、設定不足を隠さずエラーにする。全部を止めないことと、重要な失敗を見逃さないことを両立させるためだ。

修正後は、ローカルの型チェックだけで終わらせず、本番と同じビルド工程を実行し、全ページが生成できることを確認した。今回改めて感じたのは、「エラーを消す」ことと「安全に動かす」ことは別だということ。外部DBやAPIを使うWebアプリでは、接続できないときにどこまで継続し、どこで止めるかを先に決めておく必要がある。

Next.js・React・Supabase・Vercelを使った既存アプリで、「ローカルでは動くのにデプロイで止まる」「外部APIやDBの失敗でページ全体が落ちる」といった調査・小規模改修も承っています。原因整理だけ、1画面だけの修正からでもご相談ください。