ユーザーが作った画像を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自身に作らせました。仕組み・得られたメリット・そしてクラウド側の進化でこれが要らなくなりつつある話まで。

Amazon Linux 2023はデフォルトでスワップ領域がありません。メモリ2GBクラスの小さいEC2/LightsailインスタンスでOOM killerにプロセスを落とされないよう、スワップファイルを追加して永続化する手順をコマンド付きで解説します。swappinessの調整やバーストインスタンスでの注意点も。

既存のHTMLをReact/Next.jsのJSXに移植するときに必要な書き換えルールを一覧で解説します。class→className、for→htmlFor、style属性のオブジェクト化、自己閉じタグ、SVG属性のキャメルケース化など、コピペ移植でエラーになるポイントを網羅。一括変換できる無料ツールも紹介します。