【React/TypeScript】iPhone(実機)でのみNext.jsがクラッシュする現象に遭遇した【Next.js】

Next.jsプロジェクトの開発中、実機でデバックしていたらなぜかiPhoneでのみクラッシュする現象に遭遇しました。なんどもリロードするような挙動をするため、最初はリダイレクトループかな？と思いましたがPCでアクセスすると発生しないためとても困惑しました。その際の対応の備忘録です。

原因/結論

結論からいいますと、クラッシュするページで表示している画像のサイズが大きすぎることが原因と思われます。

いろいろ調べているうちに、私と同様の症状と思われるissueが見つかりましてそれがこちらになります。
　issue内のコメントで「iOSが画像読み込み時のRAM使用量を制限しているため…」とありました。どうやらこれが原因の可能性が高そうです。

検証と対応

症状が発生しているページで使用している画像を調べてみると、かなりサイズが大きい画像が混じっていました。

これを試しにサイズダウンしてみると問題の症状が発生しなくなりました。

ここまでたどり着くのに相当時間がかかってしまったのでほっとしました。

何かしらの対策がされるまで今後は注意しようと思います。

以上です。