ゼミWebサイトをWordPressからNext.jsに移行しました

はじめに

2025年6月30日、長年運用してきたWordPressベースのゼミWebサイトを、Next.js製の静的サイトに全面移行しました。この記事では、移行の背景と技術的なポイント、そしてClaude Codeとの協働について紹介します。

移行前後のサイト比較

移行の背景

• セキュリティ: WordPressの脆弱性対応やアップデート作業の負担軽減
• パフォーマンス: 静的サイト化によるページ読み込み速度の向上
• 運用コスト: GCP仮想マシンの月額費用からGitHub Pagesの無料運用への移行
• モダンな開発環境: TypeScript、Tailwind CSSなど最新技術の活用

技術スタック

移行前

• WordPress
• PHP
• MySQL
• GCP（Google Cloud Platform）仮想マシンでの運用

移行後

• フレームワーク: Next.js 15
• 言語: TypeScript
• スタイリング: Tailwind CSS
• ホスティング: GitHub Pages（無料）
• CI/CD: GitHub Actions

Claude Codeとの協働開発

今回の移行作業では、AnthropicのClaude Codeを積極的に活用し、効率的な開発を実現しました。

分担した作業

• 私の担当: プロジェクト設計、要件定義、最終的な確認とテスト
• Claude Codeの担当: コード実装、データ移行スクリプト、設定ファイル作成

Claude Codeが支援した具体的なタスク

1. WordPressデータの解析と変換
   • WordPressエクスポートファイル（XML）の解析
   • 記事データのJSON形式への変換
   • 画像ファイルのパス調整
2. Next.jsアプリケーションの構築
   • App Routerを使用した動的ルーティング
   • 記事詳細ページの自動生成
   • レスポンシブデザインの実装
3. GitHub Pages対応
   • 静的サイトエクスポート設定
   • GitHub Actionsワークフローの構築
   • カスタムドメイン設定

技術的なポイント

1. データ移行の自動化

WordPressの記事データを効率的に移行するため、専用のTypeScriptスクリプトを開発しました：

• XMLパースによる記事データの抽出
• HTMLコンテンツの最適化
• メタデータ（カテゴリ、タグ、日付）の正規化

2. 動的ルーティング

既存のURL構造（/blog/archives/[id]/）を維持するため、Next.jsのDynamic Routesを活用：

• src/app/blog/archives/[id]/page.tsxでの動的ページ生成
• 静的生成時の全記事の事前レンダリング

3. 画像リソースの最適化

• WordPressのuploadsディレクトリ構造の保持
• 画像パスの自動調整
• レスポンシブ画像の実装

移行の成果

パフォーマンス向上

• ページ読み込み時間の大幅短縮
• 静的サイトによる高速なコンテンツ配信
• CDN効果による世界中からのアクセス最適化

運用コスト削減

• ホスティング費用: GCP仮想マシン月額費用 → GitHub Pages（無料）
• サーバー管理: 仮想マシンの監視・メンテナンス作業が不要に
• スケーラビリティ: アクセス増加時の追加費用が発生しない
• セキュリティアップデート: WordPressやサーバーOSの定期更新作業が不要

開発体験の向上

• TypeScriptによる型安全性
• モダンなフロントエンド開発環境
• Git版管理による変更履歴の明確化

今後の展望

• コンテンツ管理の改善: Headless CMSの導入検討
• 機能拡張: 検索機能、RSS配信の実装
• パフォーマンス最適化: 画像最適化、キャッシュ戦略の改善
• アクセシビリティ: WCAG準拠のUI改善

おわりに

WordPressからNext.jsへの移行は、技術的な挑戦でしたが、Claude Codeとの協働により効率的に実現できました。GCPの仮想マシンからGitHub Pagesへの移行により、運用コストを完全に無料化し、セキュリティとパフォーマンスの両面で大幅な改善を達成しました。

このようなWebサイト移行を検討されている方にとって、本記事が参考になれば幸いです。