2025-12-20
Next.js から Astro へ。拡張性を捨て、シンプルさを選んだ理由
機能過多な「何でもできる」から、ブログに特化した「必要最小限」への技術的移行の記録
高機能ゆえの疲弊と乖離
かつては魔法のようだったNext.js。しかし進化の速さと複雑化により、個人ブログにはオーバースペックな課題が浮上しました。
追いつけない新機能
Server Actions / PPR
次々と追加される独自機能。ブログ用途での必要性が見出せず、キャッチアップに疲弊。
Web標準との不和
View Transitions API
Web標準APIを使いたくても、Reactの仮想DOMとの相性問題で素直に実装できないもどかしさ。
過剰なJSバンドル
SSGでも残るJS
静的サイトにも関わらず大量のJSが配信される。SEOやパフォーマンス面での懸念。
重い腰を上げた決定打
「面倒くさい」という怠惰な気持ちを打ち砕いたのは、深刻なセキュリティインシデントの連鎖でした。
Astroへの憧れ
移行したい思いはあったが、手間の多さから実行に移せず保留状態。
RSC脆弱性発覚
CVSSスコア10.0の致命的な脆弱性が公表される。即時対応が必要な緊急事態に。
追撃の脆弱性
立て続けに新たな問題が発覚。アーキテクチャ自体への懸念が確信に変わる。
Astroへの移行開始
セキュリティ対応を契機に、ブログに最適な環境への移行を決意。
「何でもできる」から「必要最小限」へ
ブログに必要なのは拡張性ではなく、Web標準に準拠したシンプルさでした。複雑なReactエコシステムを離れ、コンテンツ配信に特化したAstroを選択しました。
Next.js / React
拡張性は高いが機能過多。Web標準APIとの統合に難あり。
Astro
SSG特化でJS最小限。Web標準技術を素直に扱える。
Astroを選んだ理由
Honoも候補の一つでWeb標準だが、JSX周りでReact依存の懸念あり。ブログ用途での実績と最適化でAstroを採用。
機能の移行検証と互換性
コア機能が移植できなければ意味がありません。調査の結果、ブログに必要な機能のほとんどが移行可能でした。
スムーズに移行可能
既存の資産やライブラリをほぼそのまま流用できた機能群。
動的OGP生成
SSG / Markdown
Pagefind検索
直面した技術的壁と解決策
一筋縄ではいかない部分もありました。特にMermaid.jsによるバンドル肥大化と、CI/CD環境でのPlaywright動作には工夫が必要でした。
Mermaidのバンドル肥大化
標準プラグインでは全ページに巨大なJSが含まれてしまう問題。
問題: 500KB超
解決: Playwright
成果: 劇的削減
CI/CDとビルド時間の壁
Vercel環境での動作不具合と、OGP生成の遅延対策。
Vercel × Playwright
OGP生成の高速化
ビルドパイプラインの最適化
PlaywrightをCIで動かすための試行錯誤と、最終的なデプロイフローの確立。
ブラウザのキャッシュ
GitHub Actions上でPlaywrightのバイナリをキャッシュ。
プレビューデプロイ
Vercel CLIでプレビュー環境へデプロイしURL取得。
PRへの通知
GitHub CLIを使用し、PRにプレビューURLを自動コメント。
OGPキャッシュ活用
自作バックエンドでOGPデータを永続化しビルド時間を短縮。
技術選択のその先へ
Next.jsを選んだ3年前も、Astroを選んだ今も、その時の自分にとっての「正解」でした。
これからの向き合い方
目的を見失わない
技術の流行よりも「何を実現したいか」を優先する。
変化を恐れない
数年後にはまた別のツールを使うかもしれない柔軟さを持つ。
ポイント: 脆弱性はただのきっかけ。「本当に必要な機能は何か」を見つめ直し、自分の課題にとっての最善を選び続けましょう。
技術の波を楽しみながら乗りこなそう
sui Tech Blog