開発サーバの起動と初回動作確認 | 開発環境構築とNext.js（TypeScript）入門 | Next.jsによるWebアプリケーション開発概論

この節で学ぶこと

この節では、Next.js の開発サーバを起動する意味と、最初にどこを見れば「正しく動いている」と判断できるのかを整理します。Next.js 公式では、開発中は next dev を使い、http://localhost:3000 へアクセスして動作確認する流れが案内されています。さらに、next dev は開発モードでアプリを起動し、Hot Module Reloading（HMR）やエラー表示などを提供すると説明されています。

この節の到達目標は3つです。

1つ目は、npm run dev や pnpm dev が何をしているのかを説明できること。2つ目は、ブラウザで何を確認すれば初回起動が成功と言えるのかが分かること。3つ目は、保存後に画面が変わる現象や、たまに再読み込みが起きる理由まで含めて、開発サーバのふるまいを自分の言葉で捉えられることです。

開発サーバとは何か

まず一言で言うと

開発サーバとは、自分のパソコンの中で、作成中の Web アプリを確認するための専用サーバです。

公開前の工事現場に、作業員だけが入れる仮設の入口を作るようなもの、と考えると分かりやすいです。まだ本番公開はしていないけれど、今の状態をすぐ確認できる。そのための入口が開発サーバです。

Next.js 公式の CLI ドキュメントでは、next dev はアプリケーションを development mode で起動し、Hot Module Reloading、error reporting などを提供すると明記されています。つまり、開発サーバは単にページを表示するだけでなく、開発に便利な補助機能をまとめて提供する道具でもあります。

本番サーバとは違う

Next.js 公式では、next dev、next build、next start は役割が分かれています。

next dev は開発モードで起動
next build は本番用の最適化ビルドを作成
next start は本番モードで起動

という整理です。ここは初心者が混同しやすいところです。

dev は「作りながら確認するため」、build と start は「公開前提の動きに近づけるため」です。今この節で扱うのは、あくまで開発中の確認です。いきなり本番モードを意識しすぎなくて大丈夫です。

どのコマンドで起動するのか

`package.json` の scripts から見る

Next.js の Installation ページでは、典型的な package.json の scripts として次のような例が示されています。dev は next dev、build は next build、start は next start に対応します。

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint",
    "lint:fix": "eslint --fix"
  }
}

つまり、普段ターミナルで打つ npm run dev や pnpm dev は、結局のところ next dev を実行しているということです。ここが見えると、コマンドが急に読みやすくなります。

実際の起動コマンド

npm なら次です。公式の Installation ページでも、開発サーバを起動する流れとして npm run dev が案内されています。

npm run dev

pnpm なら次です。Quick start では pnpm dev が案内されています。

pnpm dev

どちらも役割は同じです。

「開発サーバを起動して、ローカルでアプリを見られる状態にする」。この目的は変わりません。

起動したらどこを見るのか

基本は `http://localhost:3000`

Next.js 公式の Quick start では、プロジェクトを作成して dev サーバを起動したあと、http://localhost:3000 を開くよう案内されています。また、Run the development server の説明でも、npm run dev のあとに http://localhost:3000 を開いてアプリを見る流れが示されています。

ここで localhost という言葉が出てきます。

これはざっくり言えば、「今使っている自分のパソコン自身」を指す名前です。つまり http://localhost:3000 は、インターネット上のどこかではなく、自分のマシン上で動いているアプリを見る場所です。出典なしの補足ですが、学習上はこの理解で十分です。

初回動作確認のポイント

最初に確認したいのは次の3つです。

ターミナルでエラーなく起動しているか
ブラウザで http://localhost:3000 が開くか
初期画面または自分が編集した内容が表示されるか Next.js 公式も、app/page.tsx を編集して保存し、ブラウザで結果が更新されることを確認する流れを示しています。つまり、起動できたかだけでなく、編集結果が反映されるかまで確認して初回動作確認と考えるのが自然です。

最初に編集してみるファイル

`app/page.tsx` を触る

Installation ページでは、開発サーバ起動後に app/page.tsx を編集し、保存してブラウザの変化を見る流れが案内されています。

たとえば、次のように書き換えてみます。

export default function Page() {
  return (
    <main>
      <h1>はじめてのNext.js確認</h1>
      <p>開発サーバが正しく動いています。</p>
    </main>
  )
}

保存したあと、ブラウザの表示が変われば、かなり良い確認になります。

単に「起動した」ではなく、自分の編集が画面へ届いたと分かるからです。ここで初めて、ターミナルとブラウザとソースコードが1本につながります。

Hot Module Reloading と画面更新

保存するとすぐ変わる理由

Next.js 公式は、next dev が Hot Module Reloading（HMR）を提供すると説明しています。これは、ファイルを保存したときに変更部分を反映しやすくする仕組みです。

初心者向けに言えば、

「毎回サーバを全部立て直さなくても、変更をなるべくすばやく画面へ反映してくれる仕組み」です。これがあるおかげで、1行変えて保存、すぐ確認、また修正、という開発のリズムが成り立ちます。

ただし、いつも完全に同じではない

Next.js のエラーメッセージ文書には、Fast Refresh が full reload を行う場合があると説明されています。たとえば、コンポーネント以外の export を同じファイルに置いていたり、匿名関数だったり、コンポーネント名が PascalCase でなかったりすると、Fast Refresh ではなくフルリロードになることがあります。

つまり、保存したときに「一瞬で部分更新されること」もあれば、「ページ全体が再読み込みされること」もあります。

それ自体がすぐ故障というわけではありません。更新の仕組みには条件がある、と知っておくと無用に焦らずに済みます。

初回確認で「変な動き」に見えるもの

開発中だけ2回動いたように見えることがある

React の StrictMode ドキュメントでは、開発中にコンポーネントが extra time で再レンダーされたり、Effects が extra time で再実行されたりする、と説明されています。これは impure rendering や cleanup 漏れなどのバグを見つけるためのチェックです。

初心者がここでよく驚くのが、「1回表示したのに、なんだか2回動いているように見える」という現象です。

でも、それは開発時の安全確認によることがあります。必ずしも自分のコードが完全に壊れているわけではない。この理解はかなり大切です。

画面が開かないときの最初の確認

まずは次を見ます。

ターミナルに赤いエラーが出ていないか
すでに別のプロセスが 3000 番ポートを使っていないか
localhost:3000 ではなく別ポートで起動していないか

Next.js CLI ドキュメントでは、デフォルトは http://localhost:3000 であり、-p オプションや PORT 環境変数で変更できると説明しています。たとえば next dev -p 4000 のように指定できます。

ポート番号を変える

3000 番以外で起動したいとき

Next.js CLI ドキュメントでは、開発時と next start 時のデフォルトポートは 3000 で、-p オプションまたは PORT 環境変数で変更できると説明しています。

next dev -p 4000

または、

PORT=4000 next dev

npm scripts 経由なら、実行方法は環境次第で少し変わりますが、まずは「ポートは変えられる」と知っておけば十分です。

なぜ変えるのか

理由は単純です。

3000 番が他のアプリで使われていることがあるからです。複数の開発サーバを同時に立ち上げるときにも、ポートをずらす必要が出てきます。出典なしの補足ですが、実務ではごく普通に起きる場面です。

HTTPS で開発することもある

通常は HTTP で十分

初学者の段階では、通常の http://localhost:3000 で十分です。公式 Quick start もこの流れです。

ただし認証や Webhook では HTTPS が必要なことがある

Next.js CLI ドキュメントでは、webhooks や authentication のような用途では、--experimental-https を付けて https://localhost:3000 の secure environment を作れると説明しています。自己署名証明書は mkcert を使ってローカル向けに生成されます。

next dev --experimental-https

ここは今すぐ必須ではありません。

ただ、「ローカル開発でも HTTPS が必要な場面がある」と知っているだけで、将来つまずいたときの見え方が変わります。

初回動作確認のおすすめ手順

1. サーバを起動する

npm run dev

または

pnpm dev

dev script は next dev を呼び出し、開発モードでサーバを起動します。

2. ブラウザで `localhost:3000` を開く

http://localhost:3000

公式の Quick start と development server の説明でも、この URL が案内されています。

3. `app/page.tsx` を少しだけ編集する

export default function Page() {
  return (
    <main>
      <h1>初回確認OK</h1>
      <p>保存後にこの文字が見えれば成功です。</p>
    </main>
  )
}

4. 保存して、画面が変わるか見る

Next.js 公式は、app/page.tsx を編集して保存し、更新結果をブラウザで確認するよう案内しています。ここまで確認できれば、単なる起動確認ではなく、編集・反映の基本ループが成立しています。

よくある「最初の不安」

ターミナルにたくさん文字が出て怖い

それはかなり普通です。

むしろ、何も出ない方が不安です。開発サーバは起動時に、準備している内容やエラー情報をターミナルへ表示します。初心者の段階では、全部を読めなくて大丈夫です。まずはエラーで止まっているか、起動して待機しているかの違いが分かれば十分です。出典なしの補足です。

保存したのに思った通りにならない

その場合でも、すぐに「全部壊れた」と考えなくて大丈夫です。

Fast Refresh の条件によっては full reload になったり、React StrictMode によって development 中だけ extra な挙動が見えたりします。こうした開発時特有の動きは、公式文書でも説明されています。

練習問題

問1

npm run dev や pnpm dev の主な目的として最も適切なものはどれですか。

A. 本番用に最適化済みの静的ファイルだけを配布する

B. 開発サーバを起動して、ローカルでアプリを確認できるようにする

C. データベースを自動で初期化する

D. CSS ファイルをすべて削除する

答え

解説

Next.js 公式では、next dev は development mode でアプリを起動し、Hot Module Reloading や error reporting を提供すると説明されています。package.json の dev script は通常これを呼び出します。

問2

Next.js の開発サーバを起動したあと、最初に確認する代表的な URL はどれですか。

A. http://localhost:8080 B. http://example.com C. http://localhost:3000 D. https://nextjs.org

答え

解説

Next.js 公式の Quick start と development server の説明では、起動後に http://localhost:3000 を開くよう案内されています。

問3

next dev について正しい説明はどれですか。

A. 本番サーバ専用で、編集内容はすぐ反映されない

B. 開発モードで起動し、Hot Module Reloading などを提供する

C. 画像だけを圧縮するコマンドである

D. TypeScript を完全に無効化する

答え

解説

CLI ドキュメントでは、next dev は development mode でアプリを起動し、Hot Module Reloading、error reporting などを提供すると明記されています。

問4

保存時に Fast Refresh ではなく full reload になることがある理由として、公式文書に載っているものはどれですか。

A. コンポーネント名が PascalCase ではない

B. Node.js のバージョンが偶数である

C. public フォルダが空である

D. ブラウザのタブ数が多い

答え

解説

Next.js のエラー文書では、Fast Refresh が full reload になる理由として、匿名関数、PascalCase でないコンポーネント名、React コンポーネント以外の export を同じファイルに含めることなどが挙げられています。

問5

開発中に React の StrictMode が有効な場合、起こりうる現象として正しいものはどれですか。

A. コンポーネントが extra time で再レンダーされることがある

B. すべての CSS が自動削除される

C. 本番デプロイが自動で始まる

D. localhost が無効になる

答え

解説

React の StrictMode ドキュメントでは、development 中に components が an extra time で re-render されること、Effects や ref callbacks も extra time で再実行されることが説明されています。これはバグ検出のためです。

まとめ

開発サーバの起動と初回動作確認は、ただの儀式ではありません。

ここで重要なのは、コードを書く場所、実行するコマンド、結果を見る場所の3つがつながることです。

dev script は通常 next dev を呼ぶ
next dev は開発モードで HMR やエラー表示を提供する
基本の確認先は http://localhost:3000
app/page.tsx を編集して保存し、結果が変われば初回確認として強い
Fast Refresh や StrictMode により、開発中特有の挙動が見えることもある

この一連の流れが腹落ちすると、Next.js の学習はぐっと「自分の作業」に近づきます。単なる説明を読んでいるのではなく、自分でアプリを起こして、自分で変化を起こしていると実感できます。何度も繰り返すことで自然に覚えていきます。

参考文献

Next.js Documentation, CLI: next CLI.
Next.js Documentation, Getting Started: Installation.
Next.js Documentation, Fast Refresh had to perform full reload.
React Documentation, <StrictMode>.