Skip to main content

​
開発サーバーの起動

Next.js プロジェクトで最も基本的なコマンドは開発サーバーの起動です： 
$ npm run dev
Turbopack を有効にした場合、自動的に Turbopack が使用されます。以下のような出力が表示されます： 
> nextjs-perfect-guide@0.1.0 dev
> next dev --turbopack

   ▲ Next.js 15.4.4 (Turbopack)
   - Local:        http://localhost:3000
   - Network:      http://192.168.1.47:3000

 ✓ Starting...
 ✓ Ready in 626ms
 ○ Compiling /_not-found/page ...
 ✓ Compiled /_not-found/page in 1055ms

​
ビルドコマンド

本番環境用にアプリケーションをビルドするには： 
$ npm run build

> nextjs-perfect-guide@0.1.0 build
> next build

   ▲ Next.js 15.4.4

   Creating an optimized production build ...
 ✓ Compiled successfully in 2000ms
 ✓ Linting and checking validity of types
unhandledRejection Error: Cannot find module '../chunks/ssr/[turbopack]_runtime.js'
Require stack:
- /Users/ham/git/nextjs-perfect-guide/.next/server/pages/_document.js
- /Users/ham/git/nextjs-perfect-guide/node_modules/next/dist/server/require.js
- /Users/ham/git/nextjs-perfect-guide/node_modules/next/dist/server/load-components.js
- /Users/ham/git/nextjs-perfect-guide/node_modules/next/dist/build/utils.js
- /Users/ham/git/nextjs-perfect-guide/node_modules/next/dist/build/worker.js
- /Users/ham/git/nextjs-perfect-guide/node_modules/next/dist/compiled/jest-worker/processChild.js
    at Object.<anonymous> (.next/server/pages/_document.js:2:17) {
  type: 'Error',
  code: 'MODULE_NOT_FOUND',
  requireStack: [Array]
}
ビルドプロセスでは以下が実行されます：
  • TypeScript のコンパイル
  • コードの最適化
  • 静的ページの生成（該当する場合）
  • バンドルサイズの最小化

​
本番モードでの起動

ビルド後、本番モードでアプリケーションを起動： 
$ npm run start

​
Lint の実行

ESLint を使用してコード品質をチェック： 
$ npm run lint
エラーを自動修正する場合： 
$ npm run lint -- --fix

> nextjs-perfect-guide@0.1.0 lint
> next lint --fix

✔ No ESLint warnings or errors

​
プロジェクト構造の確認

新規プロジェクトの基本的な構造： 
nextjs-perfect-guide/
├── app/                    # App Router のディレクトリ
│   ├── favicon.ico        # ファビコン
│   ├── globals.css        # グローバルスタイル
│   ├── layout.tsx         # ルートレイアウト
│   ├── page.module.css    # ホームページのスタイル
│   └── page.tsx           # ホームページ
├── eslint.config.mjs      # ESLint設定
├── next.config.ts         # Next.js設定
├── package.json           # 依存関係とスクリプト
├── public/                # 静的ファイル
└── tsconfig.json          # TypeScript設定

​
package.json のスクリプト

デフォルトで用意されているスクリプト： 
{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}
各スクリプトの役割：
  • dev: 開発サーバーを起動します。Turbopack を使用して高速なホットリロードを提供し、コード変更を即座に反映します
  • build: 本番環境用にアプリケーションを最適化してビルドします。TypeScript のコンパイル、コード最適化、静的ファイル生成を行います
  • start: ビルド済みのアプリケーションを本番モードで起動します。buildコマンドの実行後に使用します
  • lint: ESLint を実行してコード品質をチェックします。TypeScript の型チェックやコーディング規約の確認を行います

​
開発時の便利なオプション

​
ポートの変更

デフォルトの 3000 番ポート以外を使用したい場合： 
$ npm run dev -- -p 4000

> nextjs-perfect-guide@0.1.0 dev
> next dev --turbopack -p 4000

   ▲ Next.js 15.4.4 (Turbopack)
   - Local:        http://localhost:4000
   - Network:      http://192.168.1.47:4000

 ✓ Starting...
 ✓ Ready in 620ms

​
ネットワーク上で公開

同じネットワーク内の他のデバイスからアクセス可能にする： 
$ npm run dev -- -H 0.0.0.0

> nextjs-perfect-guide@0.1.0 dev
> next dev --turbopack -H 0.0.0.0

   ▲ Next.js 15.4.4 (Turbopack)
   - Local:        http://localhost:3000
   - Network:      http://0.0.0.0:3000

 ✓ Starting...
 ✓ Ready in 727ms

​
ネットワーク公開の仕組み

通常、開発サーバーはlocalhost（自分のコンピューター）でのみアクセス可能です。-H 0.0.0.0オプションを使うと、同じ Wi-Fi に接続している他のデバイス（スマートフォンやタブレットなど）からもアクセスできるようになります。 具体的な使用例：
  1. 開発 PC とスマートフォンが同じ Wi-Fi に接続されていることを確認
  2. 開発 PC の IP アドレスを確認します：
    • Mac/Linux: ifconfig または ip addr コマンド
    • Windows: ipconfig コマンド
    • 例: 192.168.1.47 のような形式の IP アドレスを探します
  3. スマートフォンのブラウザで http://[あなたのIPアドレス]:3000 にアクセス
    • 例: http://192.168.1.47:3000
注意： -H 0.0.0.0 オプションを使用しても、Next.js の表示では Network: http://0.0.0.0:3000 と表示されますが、実際にアクセスする際は自分の PC の IP アドレスを使用する必要があります。 なぜ必要？
  • レスポンシブデザインの実機テスト
  • モバイル端末での動作確認
  • チームメンバーへのデモンストレーション
注意点：
  • 同じネットワーク（Wi-Fi）に接続している必要があります
  • ファイアウォールの設定によってはアクセスできない場合があります
  • セキュリティ上、信頼できるネットワークでのみ使用してください

​
環境変数の使用

.env.localファイルを作成して環境変数を設定： 
# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgresql://user:password@localhost:5432/mydb
  • NEXT_PUBLIC_プレフィックス付き：クライアントサイドでも使用可能
  • プレフィックスなし：サーバーサイドのみで使用可能

​
デバッグモード

詳細なデバッグ情報を表示： 
$ NODE_OPTIONS='--inspect' npm run dev
Chrome DevTools でデバッグ可能になります（chrome://inspect）。

​
まとめ

これらの基本コマンドを理解することで、Next.js プロジェクトの開発を効率的に進めることができます。特にnpm run devとnpm run buildは日常的に使用するコマンドなので、しっかりと覚えておきましょう。