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

前回の記事では、パソコン上に Node.js をインストールし、
WordPress の XML データを Markdown 形式に一括変換する手順を解説しました。

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

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

lifework-blog.com

2026/03/29

手元にブログの元データが確保できたので、
今回からはいよいよ VPS（仮想専用サーバー）上での作業に入ります。

この記事では、 Ubuntu サーバーに Next.js を動かすための土台となる Node.js を導入し、
Next.js の初期システムを構築する手順を解説します。

今回の作業は、VPS 上の Ubuntu Server のコマンド操作になるため、
非エンジニアの私にとっては、緊張感のある作業だったのですが、
順を追って、一つ一つ進めていくことで、特に問題も発生せず完了させることができました。

難しく感じるかもしれませんが、自分の VPS に新しい Web 環境を構築するのは、
大きな達成感もありますので、ぜひチャレンジしてみてください。

VPS へ最新の Node.js をインストールする

まずは、 Next.js を動かすためのシステムである Node.js を VPS にインストールします。今回はバージョン24系を導入しました。

VPS に SSH 接続をして、黒い画面（ターミナル）で作業を行います。

Node.js のダウンロード先登録

1. Node.js の最新版を取得するために、専用のリポジトリ（ダウンロード元）をシステムに登録します。
2. 以下のコマンドは、 Node.js 公式が用意している安全な自動設定スクリプトです。ターミナルに入力して Enter キーを押します。

curl -fsSL https://deb.nodesource.com/setup_24.x | sudo -E bash -

3. パスワードを求められたら VPS のログインパスワードを入力します。画面に文字が流れ、元の入力待ち状態に戻れば完了です。

apt コマンドによるインストール

1. 続いて、 Ubuntu の標準パッケージ管理コマンドを使って Node.js をインストールします。以下のコマンドを実行します。

sudo apt install -y nodejs

2. このコマンドを実行すると、 Next.js の動作やパッケージ管理に必要な npm というツールも一緒にインストールされます。

インストールとバージョンの確認

1. 正しくインストールされたかを確認するために、以下のコマンドを実行します。

node -v

2. 画面に v24.14.0 など、24系のバージョン番号が表示されれば、 Node.js の準備は完了です。

Next.js の初期構築（システム本体の作成）

土台となる Node.js が入ったので、いよいよ Next.js のシステム本体（新しいブログのフォルダ群）を作成します。

インストールコマンドの実行

1. 作業用のディレクトリ（ホームディレクトリなど）に移動してから、 Next.js の構築ツールを起動します。まずは以下のコマンドを実行して安全な作業場所に移動します。

cd ~

2. 次に、以下のコマンドを実行してインストールを開始します。

npx create-next-app@latest example-blog

3. コマンドの最後にある example-blog の部分が、新しく作られるブログのデータが入る「フォルダ名」になります。

初期設定の選択（ウィザード）

1. コマンドを実行すると、 Ok to proceed? (y) という確認が出ますので、キーボードで y を入力して Enter キーを押します。
2. すると、ブログの設定に関する質問が英語で表示されます。最新のバージョンでは、以下のような画面が表示されます。

$ cd ~
$ npx create-next-app@latest example-blog
Need to install the following packages:
create-next-app@16.2.1
Ok to proceed? (y) y
? Would you like to use the recommended Next.js defaults? › - Use arrow-keys. Return to submit.
❯   Yes, use recommended defaults - TypeScript, ESLint, Tailwind CSS, App Router, AGENTS.md
    No, customize settings

インストール時に選択肢が表示される画面のイメージです。
以下の通り、Yes, use recommended defaults を選択しましょう。

3. ここでは、 TypeScript や Tailwind CSS といった、今後のブログ運営に便利で推奨される機能がすべてセットになった選択肢が用意されています。
4. そのため、迷わず Yes, use recommended defaults が選ばれている状態で Enter キーを押します。
5. 自動的に必要なファイルのダウンロードが始まり、最後に緑色の文字で Success! と表示されれば、システムの構築は完了です。

✔ Would you like to use the recommended Next.js defaults? › Yes, use recommended defaults
Creating a new Next.js app in /home/username/example-blog.

Using npm.

Initializing project with template: app-tw

Installing dependencies:
- next
- react
- react-dom

Installing devDependencies:
- @tailwindcss/postcss
- @types/node
- @types/react
- @types/react-dom
- eslint
- eslint-config-next
- tailwindcss
- typescript

added 360 packages, and audited 361 packages in 1m

144 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Generating route types...
✓ Types generated successfully

Success! Created example-blog at /home/username/example-blog

npm notice 
npm notice New minor version of npm available! 11.11.0 -> 11.12.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.12.0
npm notice To update run: npm install -g npm@11.12.0
npm notice 
$

インストール完了の画面イメージです。
「Success」という表示がでていればインストールは成功です。

npm のアップデート

1. 構築完了時、画面に npm notice としてパッケージ管理ツールの更新案内が出ることがあります。
2. 今後の安定稼働のために、案内されている以下のコマンドを実行して最新にしておきます。

sudo npm install -g npm@11.12.0

作成された Next.js のフォルダ構成と役割

VPS 上にどのようなシステムが作られたのか、中身を確認してみましょう。

1. 以下のコマンドで、作成したブログのフォルダに移動します。

cd example-blog

2. 続いて、以下のコマンドでフォルダの中身をすべて表示します。

ls -la

$ cd example-blog
$ ls -la
total 300
drwxrwxr-x   6 username username   4096 Mar 26 19:28 .
drwxr-x---  10 username username   4096 Mar 26 19:27 ..
-rw-rw-r--   1 username username    327 Mar 26 19:28 AGENTS.md
drwxrwxr-x   2 username username   4096 Mar 26 19:27 app
-rw-rw-r--   1 username username     11 Mar 26 19:28 CLAUDE.md
-rw-rw-r--   1 username username    465 Mar 26 19:27 eslint.config.mjs
-rw-rw-r--   1 username username    480 Mar 26 19:27 .gitignore
drwxrwxr-x   3 username username   4096 Mar 26 19:28 .next
-rw-rw-r--   1 username username    133 Mar 26 19:27 next.config.ts
-rw-rw-r--   1 username username    247 Mar 26 19:27 next-env.d.ts
drwxrwxr-x 291 username username  12288 Mar 26 19:28 node_modules
-rw-rw-r--   1 username username    531 Mar 26 19:27 package.json
-rw-rw-r--   1 username username 230252 Mar 26 19:28 package-lock.json
-rw-rw-r--   1 username username     94 Mar 26 19:27 postcss.config.mjs
drwxrwxr-x   2 username username   4096 Mar 26 19:27 public
-rw-rw-r--   1 username username   1450 Mar 26 19:27 README.md
-rw-rw-r--   1 username username    666 Mar 26 19:27 tsconfig.json

ls -la コマンドを実行すると、上のイメージのように example-blog フォルダの中身が表示されます。

たくさんのファイルが作成されていますが、ブログ運用において非エンジニアが頻繁に触る重要な場所は、主に以下の3つです。

• app フォルダ Web サイトの実際の画面（ページ）やデザインの枠組みを作るための最も重要な場所です。
• public フォルダ ブログ記事で使う画像ファイル（ .webp など）や、サイトのアイコンを入れておく保管場所です。
• package.json このブログシステム全体の「設計図」です。インストールされているツールのバージョンなどが記録されています。

なお、 Obsidian で書いた Markdown 記事を入れるための専用フォルダは、今後この階層に自分で作成することになります。

まとめ

今回は、 VPS 環境へ公式スクリプトを使って安全に Node.js をインストールし、 Next.js の初期システムを構築する手順を解説しました。

これで新しいブログの「内部の仕組み」は完成しましたが、まだ外部のインターネットとは繋がっていません。

次回は、 Nginx の設定を行い、新しいサブドメインへのアクセスを今回作った Next.js に繋ぐための交通整理（リバースプロキシ）と、 HTTPS 化の手順について解説します。

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

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

lifework-blog.com

2026/03/29

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

WordPressの表示速度やメンテナンス課題を解決するため、Next.jsとMarkdownを用いたモダンなブログへ移行する手順のまとめページです。非エンジニアに向けて、データ変換からVPSでのNginx・HTTPS設定まで分かりやすく解説します。

lifework-blog.com

2026/03/29