【Next.jsブログ構築まとめ】WordPressからMarkdownへ完全移行

WordPress から Next.js と Markdown を使ったモダンなブログ環境へ移行する手順を記録したシリーズです。
非エンジニアの方でも進められるよう、Windows でのデータ変換から Ubuntu（VPS）でのサーバー構築、Obsidian との自動デプロイ連携、デザイン整備・機能拡張まで順を追って解説しています。

第1回から順番に進めていただくことをおすすめしますが、Nginx の設定や動的ルーティングなど、特定のテーマだけを確認したい方は目的の回から直接ご覧ください。

■ 環境構築編
■ ブログ開発編
■ 機能拡張・運用編

■ 環境構築編

既存の WordPress 環境を壊すことなく、VPS 上に Next.js を構築してインターネットへ公開するまでの手順です。

第1回：WordPressからMarkdownベースの静的ブログへ再構築する理由と事前準備

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

WordPress の表示速度やメンテナンス課題を解決するため、 Next.js と Markdown を用いた静的ブログへの移行を決断しました。本記事では、システムを再構築する理由と、安全な移行に向けたテストページの作成手順について解説します。

WordPress から Next.js へ移行する理由の整理と、本番環境を壊さずに安全に移行検証を始めるための事前準備を解説します。

第2回：WordPressデータを抽出してXMLからMarkdownに変換する手順とNode.jsの準備

【Next.jsブログ構築】WordPressデータを抽出してXMLからMarkdownに変換する手順とNode.jsの準備

WordPress から Next.js ＋ Markdown への移行プロジェクト第2回。プラグインを使わず標準機能で XML データを抽出し、 Node.js とコマンドツールを使って Markdown 形式へ一括変換する手順を、非エンジニアの視点で解説します。

WordPress のエクスポートデータ（XML）を Markdown 形式に一括変換する手順と、変換に必要な Node.js のインストール方法を解説します。

第3回：VPSにNode.jsをインストールしてNext.jsを初期構築する手順

【Next.jsブログ構築】VPSにNode.jsをインストールしてNext.jsを初期構築する手順

WordPress から Next.js への移行プロジェクト第3回。 Ubuntu サーバーの VPS 環境へ公式スクリプトを利用して Node.js をインストールし、コマンドラインから Next.js の初期システムを安全に構築する具体的な手順を、非エンジニア向けに分かりやすく解説します。

Ubuntu サーバーに Node.js を公式スクリプトで安全にインストールし、コマンドラインから Next.js の初期システムを構築する手順を解説します。

第4回：VPS上でNginxを設定しNext.jsを起動・HTTPS化する手順

【Next.jsブログ構築】VPS上でNginxを設定しNext.jsを起動・HTTPS化する手順

WordPress から Next.js への移行プロジェクト第4回。 VPS 上で Nginx のリバースプロキシを設定し、新しいサブドメインで Next.js を安全に起動・ HTTPS 化する手順と、「 A tree hydrated but... 」などのエラー対処法を非エンジニア向けに解説します。

Nginx のリバースプロキシ設定で Next.js を外部公開し、Certbot を使った SSL 証明書の取得・HTTPS 化までの手順を解説します。

■ ブログ開発編

Markdown 記事の表示から、Obsidian からバッチファイル1つで自動公開できる仕組みの完成まで、ブログサイトの開発手順です。

第5回：WordPressから移行したMarkdown記事を表示する方法（Tailwind CSS対応）

【Next.jsブログ構築】WordPressから移行したMarkdown記事を表示する方法（Tailwind CSS対応）

WordPress から移行した Markdown 記事を Next.js で綺麗に表示する手順を解説。react-markdown の導入から Tailwind CSS によるデザイン崩れの解決、画像や HTML タグの設定まで網羅しました。

react-markdown を導入して Markdown 記事をブラウザに表示する方法と、Tailwind CSS 環境での装飾リセット問題の解決方法を解説します。

第6回：複数のMarkdown記事を読み込みトップページに新着一覧を表示する方法

【Next.jsブログ構築】複数のMarkdown記事を読み込みトップページに新着一覧を表示する方法

Next.js（App Router）のブログで、posts フォルダ内の複数 Markdown を読み込み、トップページに新着一覧（日付の新しい順）で表示する手順を解説。lib/posts.ts で一括取得し、gray-matter・Tailwind CSS を使う流れを初心者向けに紹介します。シリーズ第6回。

posts フォルダ内の Markdown ファイルを自動で読み込み、新着順に並んだ記事一覧をトップページに表示する仕組みを構築します。

第7回：個別記事の URL を自動生成する動的ルーティングの設定方法

【Next.jsブログ構築】個別記事の URL を自動生成する動的ルーティングの設定方法

Next.js で構築したブログに「動的ルーティング（Dynamic Routes）」を設定し、 Markdown 記事の URL を自動生成して個別ページに本文を表示させる手順を解説します。 App Router や Next.js 15 以降の async/await 仕様にも対応しています。

Next.js の動的ルーティング（[id] フォルダ）を使って、Markdown ファイルごとに個別記事の URL を自動生成する手順を解説します。

第8回：ヘッダーとフッターを実装して全ページ共通レイアウトを作る方法

【Next.jsブログ構築】ヘッダーとフッターを実装して全ページ共通レイアウトを作る方法

Next.js ブログ構築シリーズ第8回。components フォルダにヘッダーとフッターをコンポーネントとして作成し、layout.tsx に組み込んで全ページ共通レイアウトを実装する手順を、非エンジニア向けに解説します。

layout.tsx に Header・Footer コンポーネントを組み込み、全ページに共通のナビゲーションとフッターを一括適用する方法を解説します。

第9回：SEOとOGPをMarkdownから自動設定する方法｜generateMetadata解説

【Next.jsブログ構築】SEOとOGPをMarkdownから自動設定する方法｜generateMetadata解説

Next.js ブログ構築シリーズ第9回。 `generateMetadata` 関数を使い、 Markdown のフロントマターから `description` と `ogImage` を自動で読み込んで、記事ごとに SEO タグと OGP タグを設定する仕組みを非エンジニア向けに解説します。

generateMetadata 関数を使い、Markdown のフロントマターから記事ごとの SEO タグと OGP タグを自動設定する仕組みを構築します。

第10回：静的サイトとして本番公開しObsidianからワンクリックでデプロイする方法

【Next.jsブログ構築】静的サイトとして本番公開しObsidianからワンクリックでデプロイする方法

Next.js ブログ構築シリーズ第10回。静的書き出し（SSG）で本番公開する設定から、 WSL と rsync を使った差分転送、バッチファイルのダブルクリック1回で Obsidian の記事を自動デプロイできる仕組みの構築まで、非エンジニア向けに解説します。

output: 'export' で静的サイトとして本番公開し、WSL と rsync を使った Obsidian からの自動デプロイ環境を構築します。

第11回：ObsidianのMarkdown記事と画像を自動変換してNext.jsブログにワンクリック公開する仕組みを作る方法

【Next.jsブログ構築】ObsidianのMarkdown記事と画像を自動変換してNext.jsブログにワンクリック公開する仕組みを作る方法

Next.js ブログ構築シリーズ第11回。 Obsidian の画像リンクを Next.js 用に自動変換し、日本語ノートのファイル名と英語 URL を別々に管理できる仕組みを Node.js スクリプト（convert.js）で構築する手順を、非エンジニア向けに解説します。

Node.js スクリプト（convert.js）が Obsidian 独自の画像リンク形式を Next.js 用に自動変換し、記事で使っている画像だけを VPS に転送する仕組みを構築します。

第12回：Obsidianで書いた記事をバッチファイル1つでNext.jsブログに自動公開する方法

【Next.jsブログ構築】Obsidianで書いた記事をバッチファイル1つでNext.jsブログに自動公開する方法

Next.js ブログ構築シリーズ第12回。Windows の WSL と rsync を使い、 Obsidian で書いた記事と画像をバッチファイルのダブルクリック1つで Next.js ブログに自動公開する完全な運用フローを構築する手順を、非エンジニア向けに解説します。

deploy.bat を完成させ、Obsidian で書いた記事をダブルクリック1つで VPS へ転送・ビルド・本番公開まで完全自動化する仕組みを構築します。

■ 機能拡張・運用編

デザインの整備からアクセス解析・各種機能の実装・バックアップ環境の構築まで、ブログをより充実させていく手順です。今後追加される記事もこのセクションに収録していきます。

第13回：トップページと記事ページのデザインを決定・実装する方法

【Next.jsブログ構築】トップページと記事ページのデザインを決定・実装する方法

Next.js ブログ構築第13回。ヘッダー・フッター・トップページ・記事ページのデザインを実装する手順を非エンジニア向けに解説。ダークテーマ・2カラムグリッド対応。

ダークテーマのヘッダー・フッター、2カラムグリッド＋ページネーション対応のトップページ、カテゴリーバッジ・前後ナビを備えた個別記事ページを実装します。

第13回補足：コードブロックにシンタックスハイライトとコピーボタンを追加する方法

【Next.jsブログ構築】コードブロックにシンタックスハイライトとコピーボタンを追加する方法

Next.jsブログのコードブロックにreact-syntax-highlighterでシンタックスハイライトを追加し、コピーボタンを実装する手順を解説。クライアントコンポーネントへの分離方法も含めて非エンジニア向けに説明します。

react-syntax-highlighter を使ってコードブロックに言語別の色付き表示とコピーボタンを追加する方法と、サーバー・クライアントコンポーネントの使い分けを解説します。

第14回：Next.jsブログにスマホ用ハンバーガーメニューを実装する方法

【Next.jsブログ構築】Next.jsブログにスマホ用ハンバーガーメニューを実装する方法

Next.jsブログにスマホ用ハンバーガーメニューを実装する方法を、非エンジニア向けに優しく解説。'use client' の意味から useState による開閉制御、Tailwind CSS でのレスポンシブ対応まで、具体的なコード付きで紹介します。

useState と Tailwind CSS のブレークポイントを使い、PC とスマホで表示が切り替わるハンバーガーメニューを Header.tsx のみの変更で実装します。

第15回：Google アナリティクスとサーチコンソールを設定する方法

【Next.jsブログ構築】Google アナリティクスとサーチコンソールを設定する方法

Next.js のブログに Google アナリティクス（GA4）とサーチコンソールを設定する手順を、新規登録から丁寧に解説します。`@next/third-parties` を使った GA4 の追加方法、`layout.tsx` への確認コードの書き方、静的エクスポートモードでの `sitemap.xml` と `robots.txt` の作り方まで、非エンジニア目線で記録しています。

@next/third-parties を使った GA4 の導入と、静的エクスポートモード特有のサイトマップ・robots.txt の設置方法を含め、アクセス解析の設定手順を解説します。

第15回補足：Google Search Console が指摘したページネーションに noindex を設定する方法

【Next.jsブログ構築】Google Search Console が指摘したページネーションに noindex を設定する方法

Google Search Console がページネーション（/page/2）を「インデックス未登録」として検出した際の対処法を解説します。Next.js の generateMetadata 関数で noindex を設定する手順を、初心者向けにわかりやすく説明します。

Search Console の「インデックスに登録されないページ」レポートでページネーション（/page/2）が検出された際の対処法を解説します。generateMetadata 関数で noindex を設定し、Search Console の「修正を検証」で反映を確認する手順をまとめています。

第16回：カテゴリー・タグページを動的ルーティングで作成する方法｜静的エクスポート編

【Next.jsブログ構築】カテゴリー・タグページを動的ルーティングで作成する方法｜静的エクスポート編

Next.js の静的エクスポートブログにカテゴリー・タグページを実装する手順を解説。動的ルーティング `[slug]` で記事を自動分類し、記事 0 件のカテゴリーを 404 にしない設計も紹介します。

[slug] フォルダでカテゴリーページとタグページを自動生成し、記事 0 件でも 404 にならない generateStaticParams の設計方法を解説します。

第17回：個別記事ページに関連記事を自動表示する方法｜タグ優先・カテゴリー補完の2段階ロジック

【Next.jsブログ構築】個別記事ページに関連記事を自動表示する方法｜タグ優先・カテゴリー補完の2段階ロジック

Next.js ブログの個別記事ページに関連記事を自動表示する機能を実装する手順を解説。タグ優先・カテゴリー補完の2段階ロジックで関連性の高い記事を最大6件自動選択する方法を、コードの意味から初心者にもわかりやすく説明します。

タグ一致を優先しカテゴリーで補完する2段階ロジックで、関連性の高い記事を最大6件自動表示する機能を lib/posts.ts への関数追加と表示コードの実装で構築します。

第18回：Next.jsブログをVPSのサーバーモードに切り替えてPM2でプロセス管理する方法

【Next.jsブログ構築】Next.jsブログをVPSのサーバーモードに切り替えてPM2でプロセス管理する方法

Next.jsの静的エクスポートをVPSのサーバーモードに切り替え、PM2でプロセス管理する手順を解説します。Nginxリバースプロキシ設定、サイトマップ自動生成、deploy.shとdeploy.batの更新まで一連の作業を記録しています。

output: 'export' を削除してサーバーモードへ切り替え、PM2 によるプロセス管理と自動起動を設定します。Nginx のリバースプロキシ設定への書き換え、app/sitemap.ts によるサイトマップ自動生成、deploy.sh の更新まで一連の手順を解説します。

第18回補足：VPSのセキュリティ強化とSQLite導入｜fail2ban・Nginx設定手順

【Next.jsブログ構築】VPSのセキュリティ強化とSQLite導入｜fail2ban・Nginx設定手順

Next.jsブログのサーバーモード移行後に必要なセキュリティ強化手順を解説します。Nginxのレート制限ゾーン追加、fail2banへのNginx監視ジェイル追加、SQLiteとbetter-sqlite3の導入、閲覧数カウンター用テーブルの作成まで詳しく説明します。

サーバーモード移行に伴い必要になるセキュリティ対策として、Nginx への API レート制限ゾーンの追加と fail2ban への Nginx 監視ジェイルの追加を行います。あわせて、次回の閲覧数カウンター実装に向けた SQLite の導入と3テーブルの作成手順を解説します。

第19回：閲覧数カウンターAPIを実装してVPSのSQLiteに記録・表示する方法

【Next.jsブログ構築】閲覧数カウンターAPIを実装してVPSのSQLiteに記録・表示する方法

Next.jsブログにSQLiteを使った独自閲覧数カウンターを実装する手順を解説します。API Route作成、ViewCounterコンポーネント実装、閲覧数レポートスクリプト作成まで、非エンジニアにもわかりやすく説明します。

app/api/views/route.ts で閲覧数を記録・取得する API Route を作成し、記事ページへのアクセスのたびに SQLite の3テーブル（日別・月別・全期間）へ同時に書き込む仕組みを実装します。

第20回：Next.jsブログ全ページにサイドバーと人気記事ランキングを実装する方法

【Next.jsブログ構築】Next.jsブログ全ページにサイドバーと人気記事ランキングを実装する方法

Next.jsブログの全ページにサイドバーと人気記事ランキングを実装する方法を解説。SQLiteから閲覧数ランキングを取得するAPIの作成、Sidebarコンポーネントの実装、Nginx503エラーの原因と修正まで詳しく説明します。

SQLite に蓄積した閲覧数データを活用し、全ページにサイドバーを追加して「人気記事ランキング Top5」を表示する機能を実装します。カテゴリー・タグページではそれぞれの絞り込みランキングを表示する設計も解説します。あわせて、実装を機に発覚した第18回の Nginx 設定バグ（Connection ヘッダーの誤送信・レート制限ゾーンの設計ミス）と修正方法も記録しています。

第21回：免責事項・アフィリエイト・お問い合わせページを作成してPR表示の仕組みを実装する方法

【Next.jsブログ構築】免責事項・アフィリエイト・お問い合わせページを作成してPR表示の仕組みを実装する方法

Next.js ブログに免責事項・アフィリエイト・お問い合わせページを新規作成する手順を解説します。あわせて景品表示法に対応した「PR」バッジ表示の仕組みをフロントマターの独自フィールドで実装する方法も紹介します。

フッターに設置していた3つのリンク先ページ（免責事項・アフィリエイトについて・お問い合わせ）を新規作成します。あわせて、景品表示法のステルスマーケティング規制に対応するため、Markdown のフロントマターに pr フィールドを追加して記事カードと個別記事ページに「PR」バッジと広告バナーを条件付きで表示する仕組みを実装します。

第21回補足：お問い合わせページに Google フォームを設定する方法

【Next.jsブログ構築】お問い合わせページにGoogleフォームを設定する方法

Next.js ブログのお問い合わせページに Google フォームを設定する手順を解説します。フォームの作成から回答通知メールの設定、`contact/page.tsx` への URL 設定、ビルド・デプロイまで、初心者でも再現できる手順でまとめました。

第21回で作成したお問い合わせページ（/contact）に、Google フォームを接続して実際に機能させるまでの手順を解説します。フォームの作成・回答通知メールの設定・メールアドレスのバリデーション設定・contact/page.tsx への URL の設定とデプロイまでを順を追って説明しています。

第22回：個別記事ページにSNSシェアボタンを実装する方法

【Next.jsブログ構築】個別記事ページにSNSシェアボタンを実装する方法

Next.js の個別記事ページに X・はてブ・LINE・URL コピーの SNS シェアボタンを実装する手順を解説します。react-icons でアイコンを表示し、PC4列・スマホ2列のレスポンシブなレイアウトを Tailwind CSS で実現します。

react-icons を使って X・はてなブックマーク・LINE・URL コピーの4つのシェアボタンを個別記事ページに実装する手順を解説します。API キー不要で、1つのコンポーネントを記事上部・下部の2箇所で使い回す設計です。PC は4列横一列・スマホは2×2のレスポンシブレイアウトを Tailwind CSS で実現しています。

第23回：VPS の Next.js ブログを Git と GitHub でバックアップ・バージョン管理する方法

【Next.jsブログ構築】VPS の Next.js ブログを Git と GitHub でバックアップ・バージョン管理する方法

VPS 上の Next.js ブログのソースコードを Git と GitHub を使ってバックアップ・バージョン管理する方法を解説します。GitHub アカウントの作成から SSH 接続設定・初回 push まで、Cursor の GUI 操作方法もあわせて紹介します。

VPS 上にしか存在しないソースコードを Git と GitHub のプライベートリポジトリでバックアップし、変更履歴を残せるバージョン管理環境を構築します。GitHub アカウントの作成から SSH 接続設定・初回 push まで、Cursor の GUI を使った日常的な操作方法もあわせて解説します。

▼ このシリーズで作成している LIFEWORK Blog Next もぜひご覧ください。