Next.jsのyarn startコマンドとyarn devコマンド
Next.jsのyarn startコマンドとyarn devコマンドの違いについて説明します。
yarn dev
- 開発モードでアプリケーションを起動します。
- コードの変更を検知し、ページを自動でリロードします。
- デバッグに役立つ詳細なエラーメッセージや警告が表示されます。
- ソースマップが有効で、ブラウザのデバッガーで元のソースコードを表示できます。
yarn start
- 本番モードでアプリケーションを起動します。
- 開発サーバーではなく、ビルド済みのアプリケーションを提供するためのサーバーを起動します。
- パフォーマンスの最適化が行われ、デバッグ情報や警告は表示されません。
- 事前にyarn buildコマンドでアプリケーションをビルドする必要があります。
主な違い
モード
yarn devは開発モード、yarn startは本番モード。
ビルド
yarn startは事前にyarn buildが必要、yarn devは即座に起動。
リロード
yarn devはホットリロード対応、yarn startはビルドされた静的ファイルを提供。
エラーメッセージ
yarn devは詳細なデバッグ情報を提供、yarn startは最適化された表示。
これにより、開発中はyarn devを使用し、本番環境でのデプロイにはyarn startを使用するのが一般的です。
yarn buildコマンドを実行する前にyarn startコマンドを実行した場合
yarn buildコマンドを実行せずにyarn startコマンドを実行した場合、エラーが発生します。
yarn startはビルド済みのアプリケーションを起動するコマンドなので、事前にビルドプロセスを完了していないと、必要なビルド成果物（静的ファイルやサーバーサイドのコード）が存在しないため、アプリケーションを正常に起動できません。
事前にビルドしていない場合、以下のようなエラーメッセージが表示されることが一般的です。
Error: Could not find a production build in the 'out' directory. Try building your app with 'next build' before starting the production server.
対処方法
yarn startを実行する前に、必ず以下の手順を踏む必要があります：
1. アプリケーションのビルド:
yarn build
2. ビルドが完了した後に本番サーバーを起動:
yarn start
この手順により、yarn startコマンドはビルド済みの成果物を利用してアプリケーションを起動できます。
