GA4の参照元にlocalhost:3000が記録されていました。ローカル開発のアクセスが本番データに混ざっていたわけです。しかも厄介なのは、NODE_ENVで囲んでもVercelのプレビューデプロイは素通りすること。判定の書き方と、汚れたデータのせいで「セッション+26%」と「検索流入-42%」が同時に成立してしまった実例をまとめます。

package.jsonに残っていたpuppeteerは、コード上の参照がゼロなのにpostinstallで毎ビルドChromium（170MB前後）をダウンロードしていました。使っていない依存を洗い出す手順と、消す前の確認、package-lock.jsonとyarn.lockが併存していた件、ビルド時間の実測値までまとめます。

ユーザーが作った画像をOGPに使いたい。でもバケットを公開すると、URLさえ分かれば誰でも直接取得できてしまう。SNSのクローラーは認証できないという制約の中で、公開ACLを付けずに配信する方法を考えました。Next.jsのAPI Routeを配信口にする構成と、署名付きURLを選ばなかった理由、環境変数まわりの落とし穴をまとめます。

Next.jsで canonical や og:url を window.location.href から組み立てていると、サーバー側では必ず空文字になります。クローラーが読むのは初期HTMLなので「空のタグが出ているだけ」の状態でした。Search Consoleでインデックス未登録が積み上がっていた原因と、asPathから組み立てるhookでの直し方、動的セグメントの扱いまでまとめます。

next buildが「Compiled successfully」のあと、Collecting page dataで「Cannot find module './undefined'」と言って落ちる。原因は動的import（await import）にtsconfigのbaseUrl経由のパスを渡していたことでした。エラーメッセージから原因が全く読み取れないタイプの不具合なので、症状と切り分け方、回避方法をまとめます。

Node.js 24へ上げたらVercelのビルドが node-canvas のところで「Package 'pixman-1' was not found」で落ちるようになりました。ビルド済みバイナリが無くソースビルドに落ち、Vercelのビルドイメージにcairo/pixmanが入っていないためです。原因の説明と、@vercel/ogやhtml2canvasへの逃がし方、そして「そもそも使っていなかった」という結末までまとめます。

VercelのNode.js 18提供終了でビルドが落ちたので設定画面からバージョンを上げたのに、Redeployすると相変わらず旧バージョンでビルドされる。原因はRedeployがデプロイ作成時のビルド設定スナップショットを再利用することでした。engines.nodeで固定する方法と、設定欄の場所が移動している件をまとめます。

Bootswatch・jQuery UI ThemeRoller・daisyUI・shadcn/ui・GitHub Primer など8つのオープンソースから既製テーマを165種類集めて、役割ごとの色の割り当てを横断で見比べられるツールを作りました。並べてみたら、雰囲気がまるで違うテーマでも成功・注意・エラーの色相は9割方一致していて、逆に「面を何段持つか」はテーマごとにバラバラでした。

Hobbyプラン＋privateリポジトリのVercelで、ある日を境に全デプロイがBlockedになりました。GitHubのコミットステータスには「Deployment was blocked」。ダッシュボードはProへのアップグレードとリポジトリのpublic化を勧めてきますが、どちらも不要でした。原因はVercelアカウントとGitHubアカウントの連携切れです。症状の見分け方と復旧手順をまとめます。

Claude Codeを複数同時に走らせると、同じローカルDocker環境を取り合って作業が壊れます。Claude Codeのhooksで環境ごとに排他ロックをかけるガードツールをAI自身に作らせました。仕組み・得られたメリット・そしてクラウド側の進化でこれが要らなくなりつつある話まで。