【Next.js移行】WordPressからMarkdownベースの静的ブログへ再構築する理由と事前準備

ブログの運用を続けていく中で、ページの表示速度や
定期的なシステムのメンテナンスに課題を感じることはないでしょうか。

私も WordPress でブログを作成していますが、
今回、この note.lifework-blog.com は、今後の長期的な運用を見据え、
Next.js と Markdown を活用した新しい環境へ移行することにしました。

この記事では、
WordPress 環境から Next.js を使った静的サイトへ移行する理由と、
安全に移行を進めるための最初のステップである「事前準備（テスト記事の作成）」
について解説します。

なぜ WordPress から Next.js 環境へ移行するのか
移行に向けた事前準備
まとめ

なぜ WordPress から Next.js 環境へ移行するのか

WordPress は非常に便利で強力なツールですが、 Web サーバー上で PHP とデータベース（MariaDB など）を動かし、アクセスごとに記事を読み込んで画面を生成する動的な仕組みを持っています。

そのため、表示速度を上げるにはキャッシュなどの工夫が必要であり、常に不正アクセスや脆弱性の標的になりやすいという側面があります。

一方、 Next.js の SSG（静的サイト生成）という機能を利用すると、あらかじめ完成した HTML ファイルを用意しておくことができます。

Nginx などの Web サーバーは、裏側でプログラムやデータベースを動かすことなく、その静的ファイルを直接ユーザーに返すだけになるため、表示速度が劇的に向上し、セキュリティのリスクも激減します。

また、記事のデータ自体を Markdown 形式（.md ファイル）で手元に保存できるようになるため、 Obsidian のような使い慣れたノートアプリをそのまま執筆環境としてフル活用できるのも大きな魅力です。

私自身、今でも WordPress を使ってブログを書いていますし、そちらがメインブログになっています。

WordPress は、さまざまなテーマがあるので、お気に入りの見栄えの良いブログを構築することができますし、多種多様なプラグインによって利便性やセキュリティなどの機能面の向上も図ることができます。

ただ、ページが表示されるまでに時間がかかることや、WordPress 本体、テーマ、プラグインなどの更新作業が発生すること、Obsidian で書いた原稿を投稿するために WordPress の新規投稿画面にコピペしなくてはいけないこと、VPS 上で構築した WordPress は、やたらと攻撃対象になるなど、メンテナンスに時間を取られて、記事作成に集中できない不満があります。

いきなりメインブログを Next.js 環境に移行するのは難しいので、今回は、まずテスト的に、サブドメインのブログを Next.js 環境に移行してみて、期待した効果が表れるのか、実体験してみたい と考えています。

私自身は、エンジニアではありませんので、そもそも Next.js って何？ぐらいの状態から始まっています。

いろいろと失敗もしそうですが、そうした体験も含めて、同じように WordPress から Next.js への移行にチャレンジしてみたいと思う、【非エンジニア】の方の参考になれば と考えております。

移行に向けた事前準備

移行作業を始めるにあたり、いきなり本番環境のシステムを解体するのは危険です。

まずは、現在の WordPress 上にあるデータが、新しい Markdown 環境へ正しく変換・移行できるかを検証するためのテストを行います。

具体的には、 WordPress のエディタ上で、見出し、箇条書き、太字、画像、コードブロックなど、ブログでよく使う装飾をすべて盛り込んだ「ダミー記事」を1件作成します。

このダミー記事をエクスポートし、 Next.js 側で正しく表示されるかを確認するためのテストデータとして利用します。

上の画像は、WordPress の投稿追加画面で、ダミー記事を作成しているところです。

WordPress の管理画面から「新規追加」をクリックします。
テスト用のタイトルを入力し、本文に見出し（H2、H3）、リスト、文字装飾、コードブロックなどを入力します。
検証用に、記事内に画像を1枚挿入し、アイキャッチ画像も設定します。
記事を「公開」します。

これで、移行検証のための事前準備が完了しました。

まとめ

今回は、ブログ環境を Next.js と Markdown ベースへ再構築する理由と、移行検証のためのダミー記事を作成する手順について解説しました。

次回は、今回作成したテスト記事を含む WordPress のデータをエクスポートし、 Node.js とコマンドラインの変換ツールを使って、手元のパソコン上で一気に Markdown 形式（.md）のファイルへ変換する手順について解説します。

黒い画面を使った少し本格的な作業になりますが、非エンジニア目線で一つずつ丁寧に進めていきます。