HarioNote

Next.jsプロジェクトの開発中、実機でデバックしていたらなぜかiPhoneでのみクラッシュする現象に遭遇しました。なんどもリロードするような挙動をするため、最初はリダイレクトループかな？と思いましたがPCでアクセスすると発生しないためとても困惑しました。その際の対応の備忘録です。
<h2>原因/結論</h2>
結論からいいますと、クラッシュするページで表示している画像のサイズが大きすぎることが原因と思われます。
いろいろ調べているうちに、私と同様の症状と思われるissueが見つかりましてそれが<a href="https://github.com/vercel/next.js/issues/34455">こちら</a>になります。 
　issue内のコメントで「iOSが画像読み込み時のRAM使用量を制限しているため…」とありました。どうやらこれが原因の可能性が高そうです。
<h2>検証と対応</h2>
症状が発生しているページで使用している画像を調べてみると、かなりサイズが大きい画像が混じっていました。
これを試しにサイズダウンしてみると問題の症状が発生しなくなりました。
ここまでたどり着くのに相当時間がかかってしまったのでほっとしました。
何かしらの対策がされるまで今後は注意しようと思います。
以上です。

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

Reactなどの開発をチームで行っていると、MacユーザーとWindowsユーザーのどちらもいる場合、ESLintなどのチェックで改行コードが引っかかることがあります。
そんなときGitを使っているなら、設定ファイルを利用して一度に変更してしまうのが楽です。
<h2>手順</h2>
今回は改行コードをCRLFからLFに変更する場合を例とします。
まず「.gitattributes」ファイルをプロジェクトのルートディレクトリに作成します。
次にエディタで次の一行を書いて保存します。
<pre><code>* text=auto eol=lf
</code></pre>
これで、以降は自動で作成したファイルの改行コードはLFになります。
その時点で既に存在している他のファイルの改行コードはそのままなので、一度ファイルを削除してGitの機能でチェックアウトするなどして復活させればLFになった状態で復活します。
コマンドなら
<pre><code>git checkout -f
</code></pre>
で復活させます。
以上

Articles by Hario

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

【改行コード変換】Gitの機能を利用して複数ファイルの改行コードを一括変更する方法の備忘録