WordPressからNext.js(MDX)ブログへ移行する手順。実際に移行して404を35本生やした反省点も
2026年08月27日 09:00 / - PV
はじめに
このブログ、実はもともとWordPressで運用していたものをNext.js + MDXに移行したものです。
移行してから、ビルドも表示も速くなり、記事はGitで管理でき、デザインもコードで完全にコントロールできるようになりました。おおむね満足しているのですが、移行時にやらかした失敗がひとつあり、2年越しにSearch Consoleで請求書が回ってきました（後述します...）。
本記事では、実体験ベースでWordPress→Next.js(MDX)移行の手順と、私と同じ失敗をしないための注意点をまとめます。
移行の全体像
やることは大きく5つです。
- WordPressから記事データをエクスポートする
- エクスポートしたXMLをMDXファイルに変換する
- 画像を移設する
- URL設計を決めて、旧URLから301リダイレクトを張る（←ここをサボると事故ります）
- メタ情報（タイトル・description・タグ）を整える
手順1: WordPressから記事をエクスポート
WordPressの管理画面から ツール > エクスポート > すべてのコンテンツ を選ぶと、記事・固定ページ・コメントを含むXMLファイル（WXR形式）がダウンロードできます。
ここは公式機能なので特に迷うところはありません。プラグインも不要です。
手順2: XMLをMDXに変換する
エクスポートされたXMLはそのままではNext.jsで使えないので、記事ごとの.mdxファイルに変換します。
手前味噌ですが、この変換を自動化したWebツールを公開しています。（もともと自分たちの移行用に作った処理を、ツール化したものです）
エクスポートXMLを投げ込むと、記事ごとに分割された.mdxファイルが得られます。
自前で変換処理を書く場合は、以下の対応が必要になります（ツールではこの辺りを吸収しています）。
- WXR XMLのパースと
<item>（記事）ごとの分割 - 記事本文のHTML→Markdown変換（
<pre>のコードブロック化が特に面倒） - タイトル・投稿日・カテゴリ・タグをfrontmatter（またはメタオブジェクト）に移す
- 全角記号や
<を含む本文がMDXの構文と衝突しないようにエスケープ
MDXをNext.jsプロジェクトに組み込む部分は、別記事 Next.jsプロジェクトにマークダウンコンテンツを追加するや mdxのimportを整理した話で書いていますので、そちらをご覧ください。
手順3: 画像を移設する
WordPressの画像はwp-content/uploads/配下に年月別で入っています。丸ごとダウンロードして、Next.jsのpublic/配下に置き直すのが最短です。
このとき、記事本文中の画像URLの書き換えを一括置換で済ませられるよう、ディレクトリ構造は年月別のまま維持するのがおすすめです。うちのブログも/posts/images/202401/のような
年月ディレクトリを踏襲しています。
手順4: URL設計と301リダイレクト【最重要】
この記事で一番言いたいのはここです。
WordPressのパーマリンク（例: /posts/記事スラッグ）と、移行後のURL（例: /blog/posts/記事スラッグ）が
1文字でも違うなら、旧URL→新URLの301リダイレクトが必須です。
実際にやらかした話
うちのブログは移行時にURLのプレフィックスが/posts/...から/blog/posts/...に変わったのですが、移行作業に満足してリダイレクトを張り忘れました。
その結果どうなったかというと、
- Googleは移行から2年以上経っても旧URLをクロールし続けていた
- Search Consoleの「見つかりませんでした（404）」に35本が溜まりっぱなしになった
- その中には過去12ヶ月で最大の流入があった記事の旧URLも含まれていた
- 旧URLが検索結果に残っている間、そこからの流入をまるごと取りこぼしていた
Next.jsなら、リダイレクトはnext.config.jsに数行書くだけです。これをサボった代償としては高すぎました。
// next.config.js
async redirects() {
return [
{ source: '/posts/:slug*', destination: '/blog/posts/:slug*', permanent: true },
{ source: '/tags', destination: '/blog/tags', permanent: true },
]
},
permanent: trueで301（恒久的な移転）として返され、旧URLが持っていた評価が新URLに引き継がれます。
移行後はSearch Consoleを必ず見る
リダイレクトを張ったら、Search Consoleの 「ページのインデックス登録」で404が減っていくことを確認しましょう。「修正を検証」ボタンを押すと、Googleが優先的に再クロールしてくれます。
手順5: メタ情報を整える
WordPressではプラグイン任せだったtitle・description・OGPを、移行後は自分で面倒を見ることになります。
descriptionは記事ごとに書く（無いとGoogleが本文から勝手に抜粋し、CTRが下がりがち）- OGP画像は
@vercel/ogを使うと記事タイトル入りの画像を動的生成できて楽です - canonicalタグの出し忘れ・間違いに注意（これも移行後にSearch Consoleで気づいたやつです）
まとめ
WordPress→Next.js(MDX)移行の手順を、実体験ベースでまとめました。
- 記事の変換自体は変換ツールなりスクリプトなりで機械的に終わる
- 本当に大事なのはURL設計と301リダイレクト。移行チェックリストの最上位に置いてください
- 移行後1ヶ月はSearch Consoleの404レポートを監視する
「移行したら検索流入が消えた」という話の多くはコンテンツではなくリダイレクトの問題です。これから移行される方は、ぜひ私の屍を越えていってください。
この記事が何かのお役に立てれば幸いです。
最後までお読みいただきありがとうございました！
Share Me!