実録：WPからNext.jsへのサイト移行。AIを相棒に爆速化とコスト削減を叶えた方法
WordPressの運用負荷と表示速度に限界を感じ、Claude Codeを活用してNext.jsへ全面移行。運用コストを最小化しつつ、SEOとパフォーマンスを極限まで高めた移行プロセスを公開。
はじめに：なぜWordPressからの脱却を決めたのか
私が運営しているプロジェクトサイトの一つ（諸事情により詳細は伏せますが、一定のアクセスがある実運用サイトです）は、長らくWordPressで運用していました。
しかし、コンテンツが増えるにつれ、以下のような課題が顕在化してきました。
- 保守の肥大化: プラグインの更新、セキュリティ対策、DBのバックアップ管理が本来の「発信」という目的を圧食し始めていた。
- パフォーマンスの限界: サーバー側の処理（PHP/DB）によるオーバーヘッドがあり、PageSpeed Insightsのスコアが伸び悩んでいた。
- ランニングコスト: 商用利用を前提とした安定したサーバーを維持するための固定費。
「AIをフル活用して業務を効率化する」という自身のスタンスを体現するためにも、モダンな構成への移行を決意しました。
移行先の選定と「Claude Code」の導入
移行にあたり、以下の条件を掲げました。
- 静的生成（SSG）: サーバーレスで、爆速なレスポンスを実現すること。
- Gitベースの管理: 記事をMarkdown（MDX）で管理し、VSCode上で執筆・デプロイを完結させる。
- Cloudflare Pagesの採用: 商用利用の柔軟性と、エッジネットワークによる高速配信を重視。
- AI駆動開発: Claude Code をフル活用し、コードを極力書かずに構築する。
Next.js（App Router）が、これらを満たす最適解でした。
Claude Codeとの協業フロー
今回の移行で特筆すべきは、エンジニアリングのパートナーとしてClaude Codeを起用した点です。
実装のステップ
- 既存テーマの解析: WPで使っていたデザインの構成要素をClaude Codeに伝え、Next.js + Tailwind CSSでの再構築を依頼。
- ロジックの生成: 記事一覧の取得やカテゴリーフィルタリングなどのフロントエンドロジックをプロンプトベースで作成。
- 環境構築の自動化: Cloudflare Pagesへのデプロイ設定や、GitHub ActionsによるCI/CD構築もClaude Codeの指示に従い進めました。
「このWPサイトの構造を、Next.jsで再現するためのプロジェクト構成を提案して」という一言から始まり、数時間後にはローカル環境でプロトタイプが動き始めていました。
移行前後のパフォーマンス比較
| 指標 | WordPress (旧) | Next.js + Cloudflare (新) |
|---|---|---|
| PageSpeed (モバイル) | 30点台 | 95点以上 |
| PageSpeed (PC) | 60点台 | 100点 |
| ホスティング費用 | 数千円 / 月 | ほぼ0円（従量課金枠内） |
| 管理の手間 | プラグイン更新に追われる | Git pushのみ |
| 執筆体験 | 重い管理画面 | VSCodeで爆速入力 |
ハマったポイントとAIによる解決
1. MDXのレンダリング最適化
Markdownで記事を書く際、コードハイライトや画像のレイジーロードをどう組み込むか。Claude Codeに「next-mdx-remote を使った最適なコンポーネント設計」を依頼したところ、型定義まで完璧なコードが返ってきました。
2. 既存URLの引き継ぎ（リダイレクト設定）
SEO評価を落とさないよう、Cloudflareの _redirects ファイルの書き方を相談。数千規模のパスを考慮したルール作りも、AIなら一瞬です。
結論：AI時代における「サイト構築」の姿
今回の移行を通じて確信したのは、**「AIを使いこなせれば、開発のハードルは劇的に下がる」**ということです。
WPは素晴らしいツールですが、独自のカスタマイズや高速化を追求すると、どうしても属人的な管理が必要になります。Next.jsへの移行とClaude Codeによる開発は、保守からの解放と、圧倒的なユーザー体験を同時にもたらしてくれました。
もし、あなたが「サイトが重い」「管理が面倒」と感じているなら、AIを相棒にモダンな環境へ飛び込んでみることを強くおすすめします。