WordPressからNext.jsに移行して表示速度3倍になった話

WordPress サイトの表示が遅い、プラグインの更新が面倒、セキュリティ対策に追われている——そういう相談を受けることが増えた。

自分自身も以前 WordPress を使っていたが、Next.js に移行してから管理コストが激減した。速度面での変化が特に大きくて、Google PageSpeed Insights のスコアが 40台から 90台に跳ね上がった。「3倍」というのは表示時間ベースの体感だが、ツールの数値でも同程度の差が出ている。

この記事では、移行の判断基準・実際の手順・やってみてわかった注意点を書く。

WordPress で感じていた限界

WordPress 自体の機能は十分すぎるくらいある。ブログ、固定ページ、WooCommerce を使ったEC、会員サイト。何でも作れる。

ただ、シンプルな情報発信サイトやポートフォリオに使うには、構造が重すぎる。

• 毎月の更新作業: プラグインのアップデートを放置するとセキュリティリスクになる。気づくとダッシュボードに「6件の更新があります」と出ている
• 表示速度の限界: PHPでHTMLを動的生成するため、サーバーの処理時間が発生する。キャッシュプラグインで改善できるが、設定が複雑
• 無駄なオーバーヘッド: ブログ記事を1本表示するだけなのに、データベース接続・PHP処理・プラグイン処理が走る

SEO を意識して Core Web Vitals を改善しようとすると、プラグインが競合したり、テーマが重かったりと、問題の切り分けだけで時間を食う。

Next.js 移行で何が変わるか

Next.js の最大の特徴は**静的生成（SSG）**だ。ビルド時にHTMLを生成しておき、ユーザーがアクセスしたときはそのファイルを返すだけ。データベースへの問い合わせも、PHPの処理も発生しない。

結果として：

• TTFB（最初のバイトが届くまでの時間）が圧縮される: CDNから静的ファイルを返すだけなので、サーバー応答時間が数ms〜数十msになる
• LCP（最大コンテンツの表示時間）が改善される: Google が重視するCore Web Vitalsの指標。静的ファイルは有利
• プラグイン管理がなくなる: コードで完結するので、定期メンテナンスの手間が減る
• Vercel で無料デプロイできる: git push でデプロイが完了する。サーバー代も不要

実際に移行したサイト（このサイトも含む）で、PageSpeed スコアが平均で 50点前後から 90点台に上がった。

移行の手順（ざっくり）

1. コンテンツのエクスポート

WordPress の管理画面から「ツール → エクスポート」でXMLをダウンロードする。ブログ記事・固定ページ・メディアが含まれる。

記事数が多い場合は、wordpress-export-to-markdown などのツールでMarkdownに一括変換できる。

2. Next.js プロジェクトのセットアップ

npx create-next-app@latest my-site
cd my-site

App Router を使う構成がおすすめ。src/app 配下にページを置く。

ブログ記事は MDX（Markdownの拡張）で管理するのが楽。content/blog/ 以下に .mdx ファイルを置いて、getAllPosts() で読み込む形にすると、記事追加がファイル1枚で完結する。

3. デザインの再実装

WordPress のテーマは流用できない。CSS/コンポーネントを書き直す必要がある。

正直ここが一番手間かかる。ただ、Tailwind CSS を使うと素のCSSより格段に速く書けるし、WordPress のテーマに依存しないので後から修正もしやすい。

シンプルなブログサイトなら、既存デザインを参考に1〜3日で再現できる。

4. Vercel へのデプロイ

GitHub リポジトリを Vercel に接続するだけ。無料プランで商用サイトも運用できる。

vercel.com → New Project → GitHubリポジトリを選択 → Deploy

初回デプロイで https://your-site.vercel.app のURLが発行される。独自ドメインの設定もVercelのダッシュボードから数分でできる。

やってみてわかった注意点

動的機能はサーバー側の処理が必要になる。 お問い合わせフォーム・会員機能・決済機能を Next.js だけで作るには、Vercel Functions か別途APIサーバーが必要。WordPress の Contact Form 7 のような手軽さはない。

画像の移行は手動作業が発生する。 WordPress のメディアライブラリから画像を全部ダウンロードして、public/ 以下に再配置する必要がある。記事内の画像パスも書き換えが必要。

SEO リダイレクトを忘れると順位が落ちる。 WordPress の URL 構造（/2024/01/article-title/）と Next.js のURL構造（/blog/article-title）が違う場合、301リダイレクトを設定しないと既存のSEO評価が引き継がれない。next.config.ts の redirects 設定で対応できる。

WordPress を使い続けていい場合

Next.js への移行が向いていないケースもある。

• 非エンジニアが自分で記事更新する場合 → WordPress の管理画面は直感的で使いやすい。GutenbergエディタをNext.jsで再現するのは大変
• WooCommerce で EC を運営している場合 → 移行コストに見合わないことが多い
• 高機能なプラグインに依存している場合 → 機能の再実装が発生する

情報発信サイト・ポートフォリオ・LP専用サイトなら、移行のメリットが大きい。管理コストが下がって、表示速度が上がって、セキュリティリスクが減る。

Next.jsでポートフォリオを作る手順はNext.jsで爆速ポートフォリオサイトを作る方法で解説している。レスポンシブ対応の重要性についてはスマホ対応してないサイトは損してる？も読んでみてほしい。

WordPress からの移行作業、自分でやるのが難しければ代わりに対応します。既存サイトの URL 構造を引き継ぎながら Next.js に移行した実績もあるので、まずは現状のサイトを見せてもらえれば見積もります。