Vercelのアカウントがブロックされた話

Vercel のアカウントがブロックされてしまいました。

最近の開発はすべて Vercel に依存していたのでなかなかどうして厳しいです。

一応連絡は入れているのですが、果たして解除されるのか…。

今回なぜ Vercel のアカウントがブロックされたか、同じ被害者の方を増やさないためにも原因について書いていこうと思います。

理由はシンプルで Image Optimization の使用量が制限を突破しちゃったからです。

で、自分は Image Optimization を抑える方法を把握していなかったためにこのような事態を引き起こしてしまいました、とほほ。

どうすれば Image Optimization の値を抑えることができるかと言いますと、これは 公式のドキュメント に書かれている通りです。

要するに React の場合 next/image を使用すればするほど値が増えていくよ、ってことですね。

next/image を大量に使用すると画像の最適化処理が発生するため、それがサーバーの負担になってたってことですね。

で、自分の場合この間リリースしたオモコロアーカイブのサイトでがっつり組んでいたため、あっという間に制限を超えちゃったみたいです。

とはいえ、Next.js の公式 ESLint の推奨設定では img タグを使用せず next/image を使用することが推奨されているので、ちょっとこれはひどくない？と少しだけ思ったり思わなかったり。

そんな感じでした。

復旧するかどうかはわからないですが、最悪別のアカウントを作成して 1 つずつ移行しなおさないとダメかなーと思いつつです。

あと本サイトは Vercel ではなく Gatsby Cloud で運用していたので奇跡的に無事でした、変なところで悪運がありますね…。

ということで、皆さんは大量の画像を描画する必要がある際に next/image を使用しないように注意しましょう。

追記

Vercel のサポートに連絡を取って 3 日後に無事解除されました。

ついでにサポートに上記の対応で本当に正しいのか確認したところ、以下の回答を得られました。

That is correct. However, we recommend using the 'unoptimized' prop with next/image in this case. https://nextjs.org/docs/api-reference/next/image#unoptimized

要するに next/image は使いつつも unoptimized props に true を設定すれば大丈夫だよ！ってことみたいです、なるほどなぁ。

とはいえ、公式ドキュメントだけで問題に気づくのはかなり厳しい気がしますね…。