Firebase + Next.js における画像保存とセッション認証バグの修正記録【Procom開発ログ】

プロコム開発チーム

2025年6月18日、Procomのバックエンド開発において、画像アップロードと認証処理まわりに発生したバグの修正を実施しました。今回は、以下の2点について技術的な検証と修正を行った記録をまとめます。

Contents

1 🔧 主なバグ内容
2 💡 学びと今後の対策
- 2.1 Next.js（App Router）とセッション管理の注意点
- 2.2 FirestoreやStorageへの反映タイミングの考慮
3 📌 まとめ

🔧 主なバグ内容

1. `iron-session` を用いたセッション認証でのエラー

Next.js（App Router）と iron-session を組み合わせていた環境で、以下のようなエラーが頻発していました：

vbnetコピーする編集するTypeError: cookieHandler.get is not a function

この原因は、Next.jsのcookies() APIとiron-sessionのgetIronSession()の相性にありました。App RouterではRequestオブジェクトの仕様がNode.jsのreqと異なっており、getIronSession()が内部で期待するreq.cookies.get()のような関数が存在しないためにクラッシュしていました。

✅ 対応策：`iron-session`の完全除去

そのため、セッションの検証ロジックをiron-sessionから**cookies()と独自のverifySessionFromCookies関数**による認証方式へ移行しました。これにより、App Routerの仕組みに完全にフィットし、エラーは解消されました。

2. 画像をアップロードしない状態で「写真を保存」すると既存写真が削除される問題

「写真の位置（object-position）を調整して保存」したいだけなのに、profile.photosにbase64画像が含まれていない場合でも、既存の画像が削除されてしまう不具合が発生していました。

🔍 原因：

tsコピーする編集するif (Array.isArray(profile.photos) && profile.photos.some(p => typeof p === 'string' && p.startsWith('data:image/'))) {
  // 画像の再アップロード + 旧画像削除
} else {
  profile.photos = [];
}

この処理により、「base64画像がない＝新しい画像は不要」という意図が「画像全削除」と解釈されてしまっていたのです。

✅ 対応策：base64画像の有無による分岐処理の導入

tsコピーする編集するif (base64Images.length > 0) {
  // 旧画像削除 + 新画像アップロード
} else {
  // 画像は削除せず、位置情報のみ更新
}

このように、base64画像が存在する場合のみアップロード・削除処理を実施し、それ以外は既存画像のpositionを更新するだけの仕様へと変更しました。

💡 学びと今後の対策

Next.js（App Router）とセッション管理の注意点

App Router環境では、Node.js的なリクエストオブジェクトとは異なる構造が採用されているため、従来のライブラリが正しく動作しないケースが多々あります。今回のように、公式のcookies() APIを活用した認証方式へと早めに移行することで、安定したセッション管理が可能になります。