nuxt dev
dev コマンドは、http://localhost:3000 でホットモジュールリプレースメントを備えた開発サーバーを開始します。
npx nuxt dev [ROOTDIR] [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--dotenv] [--envName] [--no-clear] [--no-fork] [-p, --port] [-h, --host] [--clipboard] [-o, --open] [--https] [--publicURL] [--qr] [--public] [--tunnel] [--sslCert] [--sslKey]
dev コマンドは、http://localhost:3000 でホットモジュールリプレースメントを備えた開発サーバーを開始します。
引数
| 引数 | 説明 |
|---|---|
ROOTDIR="." | 作業ディレクトリを指定します（デフォルト: .） |
オプション
| オプション | デフォルト | 説明 |
|---|---|---|
--cwd=<directory> | 作業ディレクトリを指定します。これは ROOTDIR より優先されます（デフォルト: .） | |
--logLevel=<silent|info|verbose> | ビルド時のログレベルを指定します | |
--dotenv | ルートディレクトリからの相対パスで .env ファイルを読み込みます | |
--envName | 設定オーバーライドを解決する際に使用する環境（ビルド時はデフォルトで production、開発サーバー実行時は development） | |
--no-clear | 再起動時にコンソールをクリアしない | |
--no-fork | フォークモードを無効にする | |
-p, --port | リッスンするポート（デフォルト: NUXT_PORT || NITRO_PORT || PORT || nuxtOptions.devServer.port） | |
-h, --host | リッスンするホスト（デフォルト: NUXT_HOST || NITRO_HOST || HOST || nuxtOptions._layers?.[0]?.devServer?.host） | |
--clipboard | false | URL をクリップボードにコピー |
-o, --open | false | ブラウザで URL を開く |
--https | HTTPS を有効にする | |
--publicURL | 表示される公開 URL（QR コード用） | |
--qr | 利用可能な場合、公開 URL の QR コードを表示 | |
--public | すべてのネットワークインターフェースでリッスン | |
--tunnel | https://github.com/unjs/untun を使用してトンネルを開く | |
--sslCert | (非推奨) --https.cert を使用してください。 | |
--sslKey | (非推奨) --https.key を使用してください。 |
ポートとホストは、NUXT_PORT、PORT、NUXT_HOST または HOST 環境変数を介して設定することもできます。
上記のオプションに加えて、@nuxt/cli は listhen にオプションを渡すことができます。例えば、--no-qr で開発サーバーの QR コードをオフにします。listhen オプションのリストは unjs/listhen のドキュメントで確認できます。
このコマンドは process.env.NODE_ENV を development に設定します。
開発中に自己署名証明書を使用している場合、環境に NODE_TLS_REJECT_UNAUTHORIZED=0 を設定する必要があります。
tips
このセクションは公式ドキュメントの翻訳ではなく、本サイト独自の補足記事です。
Nuxt dev コマンドの補足解説
Nuxt の dev コマンドは、開発中に非常に便利なホットモジュールリプレースメント（HMR）機能を備えたローカルサーバーを起動します。これにより、コード変更を即座にブラウザに反映でき、開発効率が大幅に向上します。しかし、単にコマンドを実行するだけでなく、適切な使い方や注意点を理解することで、より快適でトラブルの少ない開発環境を構築できます。
本記事では、nuxt dev コマンドの基本的な特徴から、実務での活用例、よくある落とし穴まで丁寧に解説します。
まず結論：nuxt dev コマンドのポイント
- ローカル開発サーバーを起動し、ホットモジュールリプレースメントで即時反映を実現
- 環境変数やポート、ホストの指定が柔軟に可能
- HTTPS対応やQRコード表示など便利なオプションも利用できる
- 開発時のログレベル調整やコンソールクリアの制御も可能
- 自己署名証明書利用時は環境変数設定が必要
いつ使うべきか？ 使わない方がよいケース
使うべきケース
-
日常的な開発作業
コードを書きながら即座にブラウザで動作確認したいときに最適です。HMRによりページ全体のリロードなしで変更が反映されるため、開発効率が大幅に向上します。 -
UIやスタイルの調整
フロントエンドの見た目を頻繁に変更する際、即時反映があることでストレスなく作業できます。 -
APIやサーバーサイドロジックの開発中
サーバーサイドのコードもホットリロードされるため、バックエンドの修正もスムーズです。
使わない方がよいケース
-
本番環境のテストやデプロイ
devコマンドは開発用であり、本番環境向けの最適化やセキュリティ設定はされていません。実際の公開環境ではnuxt buildとnuxt startを使いましょう。 -
パフォーマンス検証
開発サーバーはデバッグや利便性重視のため、パフォーマンスは本番環境と異なります。負荷テストや速度測定は本番ビルドで行うべきです。
実務でよくあるユースケースとサンプルコード
1. ポートやホストを指定して複数プロジェクトを同時起動
複数の Nuxt プロジェクトを同時に開発する場合、ポートやホストを明示的に指定すると便利です。
npx nuxt dev --port 3001 --host 0.0.0.0
これにより、ローカルネットワーク上の他のデバイスからもアクセス可能になります。
2. HTTPS対応のローカル開発環境構築
自己署名証明書を使って HTTPS で開発したい場合、--https オプションを利用します。
npx nuxt dev --https
ただし、自己署名証明書を使う場合は環境変数 NODE_TLS_REJECT_UNAUTHORIZED=0 を設定しないと通信エラーになることがあります。
3. 環境変数ファイルを読み込んで設定を切り替える
.env ファイルを使って環境ごとに設定を切り替えたい場合は、--dotenv オプションを使います。
npx nuxt dev --dotenv
これにより、開発時に必要なAPIキーや設定を簡単に管理できます。
よくある落とし穴・注意点
1. SSR と CSR の違いによる挙動の違い
nuxt dev は SSR（サーバーサイドレンダリング）を前提に動作しますが、HMR によるクライアント側の再描画とサーバー側のレンダリング結果が不整合になることがあります。特に状態管理や非同期処理のタイミングに注意が必要です。
2. Hydration エラーの発生
開発中にコンポーネントの初期状態がサーバーとクライアントで異なると、Hydration エラーが発生します。これは HMR の影響で状態が不整合になることが原因です。状態の初期化や副作用の管理を慎重に行いましょう。
3. パフォーマンスの過信は禁物
dev コマンドは開発用に最適化されていないため、ビルド時間やレスポンス速度は本番環境より遅いです。パフォーマンス改善の検証は必ず本番ビルドで行いましょう。
4. コンソールのクリア設定に注意
デフォルトでは再起動時にコンソールがクリアされますが、--no-clear オプションでこれを無効化できます。ログを追いたい場合は設定を検討してください。
まとめ
Nuxt の dev コマンドは、開発効率を大幅に向上させる強力なツールです。ホットモジュールリプレースメントにより即時反映が可能で、柔軟なオプションで環境に合わせた設定ができます。ただし、本番環境とは異なる挙動やパフォーマンスの違いがあるため、適切な使い分けと注意が必要です。
実務ではポート指定やHTTPS対応、環境変数管理などのオプションを活用し、快適な開発環境を整えましょう。落とし穴を理解しつつ使いこなすことで、Nuxt 開発がよりスムーズになります。
自己署名証明書を使う場合は、必ず NODE_TLS_REJECT_UNAUTHORIZED=0 を設定しておくことを忘れないでください。これを設定しないと HTTPS 通信が失敗します。
dev コマンドは開発用です。公開環境では必ず build と start コマンドを使いましょう。
※このページは Nuxt.js 公式ドキュメントの翻訳ページです。
公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/3.x/api/commands/dev