Node.jsとは
「ブラウザの外で動くJavaScriptエンジン」
JavaScript はもともと「ブラウザの中で動く言語」でした。
Node.js は、その JavaScript を「パソコンの中（ブラウザの外）」でも動かせるようにした実行環境です。
イメージとしては、
- ブラウザの中だけで使えていた JavaScript に、
- 「パソコン全体を触れる力」「ファイルを読んだり書いたりする力」
- 「サーバーとして動く力」
を与えてくれる存在です。
Next.js の開発では、
- コマンドを実行してプロジェクトを作る
- 開発サーバーを起動する
- 本番用にビルドする
といったことを、全部 Node.js の上で行います。
なので「Next.js = Node.js の力を借りて動く React のフレームワーク」と考えると理解しやすいです。
Node.js が必須な理由
Next.js の公式ドキュメントでも、「Next.js を始めるには Node.js が必要」と明記されています。
例えば Next.js 16 のドキュメントでは、システム要件として「Node.js 20.9 以降」が必要とされています。
これは、Next.js が内部で Node.js を利用して、
- 開発サーバー（
next dev） - ビルド処理（
next build） - 本番サーバー（
next start）
などを動かすからです。
ちゃんと入ったか確認する例
インストールできたかを確認する典型的な例は次のコマンドです。
node --version
ここで v20.11.0 のようなバージョンが表示されれば OK、というのがよくある確認方法です。
npm / npxの役割
npmとは何か（パッケージ管理の「アプリストア」）
npm は「Node Package Manager」の略で、Node.js のためのパッケージ管理ツールです。
「パッケージ」というのは、
- 他の誰かが作って公開してくれている便利なコードのまとまり（ライブラリ・ツール）
だと思ってください。
スマホで言うと「App Store」や「Google Play」からアプリを入れるように、
Node.js の世界では npm を使って「必要な機能」をどんどんプロジェクトに入れていきます。
Next.js のプロジェクトの中でも、
- React 本体
- Next.js 本体
- ESLint やスタイル関連のツール
などは、全部 npm 経由でインストールされます。
npxとは何か（インストールせずに一時的に実行するもの）
npx は「Node Package eXecutor」の略で、npm に付属しているツールです。
役割はシンプルで、「パッケージを、インストールしていなくても、その場で実行するためのコマンド」です。
例えば、Next.js の新しいプロジェクトを作るときに、
npx create-next-app@latest
のように使います。
このとき npx は、
create-next-appというツールをインターネットから取得し、- ローカルに永続的にインストールせず、
- 今だけ一時的に実行してくれます。
これによって、
- PC の中がツールだらけで汚れない
- いつも最新バージョンを簡単に使える
というメリットがあります。
npmとnpxをざっくり対比する
同じ「npm 系」ですが、感覚としてはこう整理すると分かりやすいです。
- npm → プロジェクトの中に「道具を入れる」係（インストール・管理）
- npx → 必要な道具を「その場で呼び出して使う」係（実行）
Next.js のスタートラインでは、
- プロジェクト作成 →
npx create-next-app@latest - できたプロジェクトの中でツールを使う →
npm run devなど
という組み合わせで使います。
Next.jsプロジェクト作成
create-next-appで一気に土台を作る
Next.js には、公式で「create-next-app」というプロジェクト生成ツールが用意されています。
これは「Next.js 用のひな型を自動で作ってくれるコマンド」です。
Next.js 公式ドキュメントでも、「新しい Next.js アプリを作る最も簡単な方法は create-next-app を使うこと」と書かれています。
基本のコマンドは次のようになります。
npx create-next-app@latest
このコマンドを打つと、対話形式でいくつか質問されます。
例えば：
- プロジェクト名は？（
my-appなど） - TypeScript を使いますか？
- ESLint を使いますか？
- Tailwind CSS を使いますか？
- App Router を使いますか？（推奨）
といった選択肢が出てきます。
初心者向けおすすめ回答イメージ
完全初心者なら、とりあえず次のような選び方でも大丈夫です（言葉でイメージを書きます）。
- プロジェクト名 →
next-tutorialなど分かりやすい名前 - TypeScript → 最初は「No」でもOK（後から覚えてよい）
- ESLint → 「Yes」にしておくとコードのミスを教えてくれる
- Tailwind CSS → 最初は「No」でもOK（CSS に慣れてからでもよい）
- App Router → 「Yes」（今の Next.js では標準的な選択）
もちろん、今の公式テンプレートでは「おすすめ設定をまとめてYes/No」で選べる場合もあります。
コマンド引数で一気に作る例
対話形式ではなく、オプションを最初から指定して作ることもできます。
例えば TypeScript プロジェクトを作るなら、こう書けます。
npx create-next-app@latest my-app --ts
my-app というフォルダに、TypeScript 版の Next.js プロジェクトが一気に出来上がります。
npm run dev で起動
開発サーバーを立ち上げる流れ
create-next-app でプロジェクトを作ったら、次はそのフォルダに移動します。
cd my-app
そして開発用サーバーを起動するために、次のコマンドを実行します。
npm run dev
Next.js の公式ドキュメントでも、プロジェクト作成後に cd my-app → npm run dev → ブラウザで http://localhost:3000 にアクセス、という流れが紹介されています。
「npm run dev」が何をしているのか
npm run dev は、「package.json に書いてある scripts の dev を実行する」という意味です。
Next.js プロジェクトでは、package.json に例えば次のような設定が自動で入っています。
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}
このとき、
npm run dev→next devを実行（開発サーバー起動）npm run build→ 本番用ビルドnpm run start→ 本番サーバー起動npm run lint→ 静的解析ツールでコードチェック
という対応関係になっています。
初心者がまず覚えるべきは、npm run dev だけで十分です。
これを叩くと、Next.js が Node.js 上で開発サーバーを起動し、http://localhost:3000 でアプリが見られるようになります。
実際の動きのイメージ
- ターミナルで
npm run devを実行する - 「ready – started server on 0.0.0.0:3000」 のようなログが出る
- ブラウザで
http://localhost:3000を開く - Next.js のウェルカムページが表示される（初期画面）
ここまで行ければ、
- Node.js が正しく動いている
- npm / npx が正しく使えている
- Next.js プロジェクトが正常に作成されている
という 3 点が一気に確認できたことになります。
開発環境準備の全体像（頭の中の地図）
ここまでの内容を、頭の中でつながるように整理しておきます。
1. Node.js をインストールする
Next.js を動かすための土台（実行環境）です。
これがないと、npx や npm も使えません。
2. npm / npx の役割を知っておく
- npm → プロジェクト内のパッケージ管理
- npx → パッケージのコマンドを一時的に実行する
Next.js を始めるときは、主に npx create-next-app@latest と npm run dev の 2 つを押さえておけばOKです。
3. create-next-app で Next.js プロジェクトを作成
npx create-next-app@latest を実行して、質問に答えるだけで、
「現場でも使えるレベルに近い Next.js の土台」が一気に生成されます。
4. プロジェクトに入って npm run dev で起動
cd プロジェクト名 → npm run dev で開発サーバーを起動し、
ブラウザで http://localhost:3000 を開いて、初期画面が出たら成功です。
ここまでの流れがスムーズにできるようになれば、
もう「Next.js × React の世界に入る準備」はほぼ完了です。
この次のステップでは、
app/page.tsx（またはpage.jsx）の中身を書き換えてみる- 自分のテキストや簡単なコンポーネントを追加してみる
あたりから手を動かしていくと、「あ、ちゃんと自分のコードが動いてる」と実感できるはずです。