Nuxtのpreviewコマンドとは？

Nuxtのpreviewコマンドは、buildコマンドで生成されたアプリケーションを本番環境に近い形でローカルサーバー上に立ち上げ、動作確認を行うためのコマンドです。
開発中のホットリロードが効くdevモードとは異なり、実際にビルドされた成果物を使うため、リリース前の最終チェックやパフォーマンス検証に最適です。

このコマンドを使うことで、開発環境と本番環境の差異による問題を早期に発見しやすくなり、安定したリリースを実現できます。

まず結論：previewコマンドのポイント

• buildコマンド実行後に使い、ビルド済みの成果物を本番に近い状態でプレビューできる
• startコマンドはpreviewのエイリアスで同じ動作をする
• 環境変数はprocess.env.NODE_ENVがproductionに設定される
• .envファイルを自動で読み込むため、環境設定の確認に便利
• ポートや作業ディレクトリなど細かいオプション指定が可能

いつ使うべきか？使わない方がよいケース

使うべきケース

• リリース前の最終動作確認
  実際にビルドされたファイルで動作を検証し、本番環境での挙動をシミュレーションしたいとき。
• パフォーマンスやSSRの挙動チェック
  開発モードとは異なるSSRの挙動やキャッシュの影響を確認したい場合。
• 環境変数の反映確認
  .envファイルや環境変数の設定が正しく反映されているかをテストしたいとき。

使わない方がよいケース

• 開発中の頻繁なコード変更時
  ホットリロードが効かないため、変更ごとに再ビルドが必要で効率が悪い。
• 本番環境の代替としての運用
  previewはあくまでローカルプレビュー用であり、本番環境の運用には適さない。
• 複雑な環境設定や外部サービス連携の検証
  本番環境のインフラ設定や外部APIの認証などは別途本番環境で検証すべき。

実務でよくあるユースケースとサンプルコード

1. リリース前の動作確認

ビルド後にpreviewコマンドでローカルサーバーを立ち上げ、実際のユーザー視点で動作をチェックします。

npx nuxt build
npx nuxt preview -p 3000

ブラウザで http://localhost:3000 にアクセスし、SSRや静的ファイルの動作を確認します。

2. 環境変数の反映確認

.envファイルを用意し、previewコマンドで環境変数が正しく読み込まれるかを検証します。

# .env
API_BASE_URL=https://api.example.com

npx nuxt build
npx nuxt preview --dotenv

アプリ内でprocess.env.API_BASE_URLが期待通りの値になっているかを確認します。

3. ポート指定で複数環境を同時にプレビュー

複数のビルド成果物を別々のポートで立ち上げ、比較検証したい場合。

npx nuxt preview -p 4000
npx nuxt preview -p 5000

よくある落とし穴・注意点

SSRとHydrationの違いに注意

previewコマンドは本番ビルドのSSRを使うため、開発モードとは異なるHydrationの挙動が発生します。
これにより、開発中は気づかなかったクライアント側のJavaScriptエラーやUIの不整合が表面化することがあります。

パフォーマンスの誤解に注意

previewは本番環境に近いですが、実際の本番サーバーのインフラ構成やCDNキャッシュなどは反映されません。
パフォーマンス測定はあくまで参考値として扱い、本番環境での検証も必須です。

環境変数の管理に注意

previewコマンドは.envファイルを自動で読み込みますが、本番環境では環境変数を別途設定する必要があります。
誤って本番環境の秘密情報をローカルの.envに含めないように管理しましょう。

まとめ

Nuxtのpreviewコマンドは、ビルド後のアプリケーションを本番に近い状態でローカルに立ち上げ、動作確認や環境変数の検証を行うための強力なツールです。
リリース前の最終チェックやパフォーマンス検証に役立ちますが、開発中の頻繁な変更には向かず、本番環境の代替としても使えません。
正しく使いこなすことで、リリースの品質向上とトラブルの早期発見に大きく貢献します。

ぜひ本記事のポイントを参考に、previewコマンドを効果的に活用してください。