> ## Documentation Index
> Fetch the complete documentation index at: https://atsushiishida.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 基本コマンドを知ろう

> Next.jsプロジェクトで使用する基本的なコマンドと開発ワークフロー

## 開発サーバーの起動

Next.js プロジェクトで最も基本的なコマンドは開発サーバーの起動です：

```bash theme={null}
$ npm run dev
```

Turbopack を有効にした場合、自動的に Turbopack が使用されます。以下のような出力が表示されます：

```bash theme={null}
> 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
```

## ビルドコマンド

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

```bash theme={null}
$ 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 のコンパイル
* コードの最適化
* 静的ページの生成（該当する場合）
* バンドルサイズの最小化

## 本番モードでの起動

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

```bash theme={null}
$ npm run start
```

## Lint の実行

ESLint を使用してコード品質をチェック：

```bash theme={null}
$ 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 のスクリプト

デフォルトで用意されているスクリプト：

```json theme={null}
{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}
```

各スクリプトの役割：

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

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

### ポートの変更

デフォルトの 3000 番ポート以外を使用したい場合：

```bash theme={null}
$ 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
```

### ネットワーク上で公開

同じネットワーク内の他のデバイスからアクセス可能にする：

```bash theme={null}
$ 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`ファイルを作成して環境変数を設定：

```bash theme={null}
# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgresql://user:password@localhost:5432/mydb
```

* `NEXT_PUBLIC_`プレフィックス付き：クライアントサイドでも使用可能
* プレフィックスなし：サーバーサイドのみで使用可能

## デバッグモード

詳細なデバッグ情報を表示：

```bash theme={null}
$ NODE_OPTIONS='--inspect' npm run dev
```

Chrome DevTools でデバッグ可能になります（chrome://inspect）。

## まとめ

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