モバイルLCPが最悪17.4秒だったNext.js個人ブログ(Cloudflare Workers / OpenNext)。犯人は画像ではなく、render-blockingなCSSやクライアントバンドルへの記事本文の混入でした。実トレースで一つずつ潰し、LCPを本番3.7〜4.3秒まで改善した、Core Web Vitals改善の記録です。
Next.js + Cloudflare Workersで動く個人ブログをmicroCMSからリポジトリ内のMDX(Velite)へ移行した記録です。URL完全維持・変換ロスゼロで記事60本を引っ越し、旧実装のバグも7個直しました!
CloudFrontとNext.jsの組み合わせで発生する画像最適化エラー「url parameter is not allowed」の完全解決ガイド。AllViewerExceptHostHeaderポリシーを使った根本的解決策、段階的なデバッグ手順、実装例を詳しく解説します。
CORSエラーの原因と解決方法を解説します。Next.jsのRoute Handlerを使用したAPIエンドポイントにおいて、外部ドメインからのリクエストがCORSポリシーにブロックされる問題を、レスポンスヘッダーの設定やOPTIONSメソッドの許可によって解決する具体的な方法を紹介します。