next CLI
Next.js CLI を使用すると、アプリケーションの開発、ビルド、起動などを行うことができます。
基本的な使用方法:
npm run next [コマンド] [オプション]リファレンス
以下のオプションが利用可能です:
| オプション | 説明 |
|---|---|
-h または --help | 利用可能なすべてのオプションを表示 |
-v または --version | Next.jsのバージョン番号を出力 |
コマンド
以下のコマンドが利用可能です:
| コマンド | 説明 |
|---|---|
dev | ホットモジュールリロード (HMR) やエラーレポートなどを備えた開発モードでNext.jsを起動します。 |
build | アプリケーションの最適化されたプロダクションビルドを作成します。各ルートに関する情報を表示します。 |
start | プロダクションモードでNext.jsを起動します。まずnext buildでアプリケーションをコンパイルする必要があります。 |
info | Next.jsのバグ報告に使用できる現在のシステムに関する詳細情報を出力します。 |
lint | /src、/app、/pages、/components、/libディレクトリ内のすべてのファイルに対してESLintを実行します。ESLintがアプリケーションに設定されていない場合、必要な依存関係をインストールするためのガイド付きセットアップも提供されます。 |
telemetry | Next.jsの完全に匿名のテレメトリ収集を有効または無効にします。 |
豆知識:
nextをコマンドなしで実行すると、next devのエイリアスとして機能します。
next dev オプション
next devは、ホットモジュールリロード (HMR)、エラーレポートなどを備えた開発モードでアプリケーションを起動します。next devを実行する際に以下のオプションが利用可能です:
| オプション | 説明 |
|---|---|
-h, --help | 利用可能なすべてのオプションを表示。 |
[directory] | アプリケーションをビルドするディレクトリ。指定しない場合はカレントディレクトリが使用されます。 |
--turbo | Turbopackを使用して開発モードを開始します。 |
-p または --port <port> | アプリケーションを起動するポート番号を指定します。デフォルト: 3000, 環境変数: PORT |
-H または --hostname <hostname> | アプリケーションを起動するホスト名を指定します。ネットワーク上の他のデバイスからアプリケーションを利用可能にする場合に便利です。デフォルト: 0.0.0.0 |
--experimental-https | HTTPSでサーバーを起動し、自己署名証明書を生成します。 |
--experimental-https-key <path> | HTTPSキーファイルへのパス。 |
--experimental-https-cert <path> | HTTPS証明書ファイルへのパス。 |
--experimental-https-ca <path> | HTTPS認証局ファイルへのパス。 |
--experimental-upload-trace <traceUrl> | デバッグトレースの一部をリモートHTTP URLに報告します。 |
next build オプション
next buildは、アプリケーションの最適化されたプロダクションビルドを作成します。出力には各ルートに関する情報が表示されます。例:
Route (app) サイズ 初回ロードJS
┌ ○ /_not-found 0 B 0 kB
└ ƒ /products/[id] 0 B 0 kB
○ (静的) 静的コンテンツとして事前レンダリング
ƒ (動的) オンデマンドでサーバーサイドレンダリング- サイズ: クライアントサイドでページにナビゲートする際にダウンロードされるアセットのサイズ。各ルートのサイズにはその依存関係のみが含まれます。
- 初回ロードJS: サーバーからページを訪問する際にダウンロードされるアセットのサイズ。すべてで共有されるJSの量は別の指標として表示されます。
これらの値はどちらもgzipで圧縮されています。初回ロードは緑、黄、赤で示されます。パフォーマンスの高いアプリケーションでは緑を目指してください。
next buildコマンドで利用可能なオプションは以下の通りです:
| オプション | 説明 |
|---|---|
-h, --help | 利用可能なすべてのオプションを表示。 |
[directory] | アプリケーションをビルドするディレクトリ。指定しない場合はカレントディレクトリが使用されます。 |
-d または --debug | より詳細なビルド出力を有効にします。このフラグを有効にすると、リライト、リダイレクト、ヘッダーなどの追加のビルド出力が表示されます。 |
--profile | Reactのプロダクションプロファイリングを有効にします。 |
--no-lint | リンターを無効にします。 |
--no-mangling | マングリングを無効にします。これはパフォーマンスに影響を与える可能性があり、デバッグ目的でのみ使用してください。 |
--experimental-app-only | App Routerのルートのみをビルドします。 |
--experimental-build-mode [mode] | 実験的なビルドモードを使用します。(選択肢: "compile", "generate", デフォルト: "default") |
next start オプション
next startは、プロダクションモードでアプリケーションを起動します。まずnext buildでアプリケーションをコンパイルする必要があります。
next startコマンドで利用可能なオプションは以下の通りです:
| オプション | 説明 |
|---|---|
-h または --help | 利用可能なすべてのオプションを表示。 |
[directory] | アプリケーションを起動するディレクトリ。指定しない場合はカレントディレクトリが使用されます。 |
-p または --port <port> | アプリケーションを起動するポート番号を指定します。(デフォルト: 3000, 環境変数: PORT) |
-H または --hostname <hostname> | アプリケーションを起動するホスト名を指定します(デフォルト: 0.0.0.0)。 |
--keepAliveTimeout <keepAliveTimeout> | 非アクティブな接続を閉じる前に待機する最大ミリ秒数を指定します。 |
next info オプション
next infoは、GitHub issueを開く際にNext.jsのバグ報告に使用できる現在のシステムに関する詳細情報を出力します。この情報には、オペレーティングシステムのプラットフォーム/アーキテクチャ/バージョン、バイナリ(Node.js、npm、Yarn、pnpm)、パッケージバージョン(next、react、react-dom)などが含まれます。
出力は次のようになります:
オペレーティングシステム:
プラットフォーム: darwin
アーキテクチャ: arm64
バージョン: Darwin Kernel Version 23.6.0
利用可能メモリ (MB): 65536
利用可能CPUコア数: 10
バイナリ:
Node: 20.12.0
npm: 10.5.0
Yarn: 1.22.19
pnpm: 9.6.0
関連パッケージ:
next: 15.0.0-canary.115 // 最新利用可能バージョンが検出されました (15.0.0-canary.115).
eslint-config-next: 14.2.5
react: 19.0.0-rc
react-dom: 19.0.0
typescript: 5.5.4
Next.js設定:
output: N/Anext infoコマンドで利用可能なオプションは以下の通りです:
| オプション | 説明 |
|---|---|
-h または --help | 利用可能なすべてのオプションを表示 |
--verbose | デバッグ用の追加情報を収集します。 |
next lint オプション
next lintは、pages/、app/、components/、lib/、src/ディレクトリ内のすべてのファイルに対してESLintを実行します。ESLintがアプリケーションに設定されていない場合、必要な依存関係をインストールするためのガイド付きセットアップも提供されます。
next lintコマンドで利用可能なオプションは以下の通りです:
| オプション | 説明 |
|---|---|
[directory] | リンターを実行するベースディレクトリ。指定しない場合はカレントディレクトリが使用されます。 |
-d, --dir, <dirs...> | ESLintを実行するディレクトリを指定します。 |
--file, <files...> | ESLintを実行するファイルを指定します。 |
--ext, [exts...] | JavaScriptファイルの拡張子を指定します。(デフォルト: [".js", ".mjs", ".cjs", ".jsx", ".ts", ".mts", ".cts", ".tsx"]) |
-c, --config, <config> | この設定ファイルを使用し、他のすべての設定オプションを上書きします。 |
--resolve-plugins-relative-to, <rprt> | プラグインを解決するディレクトリを指定します。 |
--strict | Next.jsのstrict設定を使用して.eslintrc.jsonファイルを作成します。 |
--rulesdir, <rulesdir...> | このディレクトリから追加のルールを使用します。 |
--fix | リンティングの問題を自動修正します。 |
--fix-type <fixType> | 適用する修正のタイプを指定します(例: problem, suggestion, layout)。 |
--ignore-path <path> | 無視するファイルを指定します。 |
--no-ignore <path> | --ignore-pathオプションを無効にします。 |
--quiet | エラーのみを報告します。 |
--max-warnings [maxWarnings] | 非ゼロの終了コードをトリガーする前の警告数を指定します。(デフォルト: -1) |
-o, --output-file, <outputFile> | レポートを書き込むファイルを指定します。 |
-f, --format, <format> | 特定の出力フォーマットを使用します。 |
--no-inline-config | コメントによる設定やルールの変更を防ぎます。 |
--report-unused-disable-directives-severity <level> | 未使用のeslint-disableディレクティブの重大度レベルを指定します。(選択肢: "error", "off", "warn") |
--no-cache | キャッシュを無効にします。 |
--cache-location, <cacheLocation> | キャッシュの場所を指定します。 |
--cache-strategy, [cacheStrategy] | キャッシュ内の変更されたファイルを検出するための戦略を指定します。(デフォルト: "metadata") |
--error-on-unmatched-pattern | ファイルパターンが一致しない場合にエラーを報告します。 |
-h, --help | このメッセージを表示します。 |
next telemetry オプション
Next.jsは完全に匿名のテレメトリデータを収集します。この匿名プログラムへの参加は任意であり、情報を共有したくない場合はオプトアウトできます。
next telemetryコマンドで利用可能なオプションは以下の通りです:
| オプション | 説明 |
|---|---|
-h, --help | 利用可能なすべてのオプションを表示。 |
--enable | Next.jsのテレメトリ収集を有効にします。 |
--disable | Next.jsのテレメトリ収集を無効にします。 |
テレメトリについて詳しく学びます。
例
デフォルトポートの変更
デフォルトでは、Next.jsは開発時およびnext start実行時にhttp://localhost:3000を使用します。デフォルトポートは-pオプションで変更できます:
next dev -p 4000またはPORT環境変数を使用することも可能です:
PORT=4000 next devGood to know: HTTPサーバーの起動は他のコードが初期化される前に行われるため、
.envファイルでPORTを設定することはできません。
開発時のHTTPS使用
ウェブフックや認証などの特定のユースケースでは、localhost上で安全な環境を構築するためにHTTPSが必要になる場合があります。Next.jsは--experimental-httpsフラグを使用してnext devで自己署名証明書を生成できます:
next dev --experimental-httpsまた、--experimental-https-keyと--experimental-https-certでカスタム証明書と鍵を提供することも可能です。オプションで--experimental-https-caを使用してカスタムCA証明書も提供できます。
next dev --experimental-https --experimental-https-key ./certificates/localhost-key.pem --experimental-https-cert ./certificates/localhost.pemnext dev --experimental-httpsは開発専用であり、mkcertを使用してローカルで信頼された証明書を作成します。本番環境では、信頼できる認証局から発行された適切な証明書を使用してください。
Good to know: Vercelにデプロイする場合、Next.jsアプリケーションのHTTPSは自動的に設定されます。
ダウンストリームプロキシのタイムアウト設定
Next.jsをダウンストリームプロキシ（例: AWS ELB/ALBなどのロードバランサー）の背後にデプロイする場合、Nextの基盤となるHTTPサーバーにkeep-aliveタイムアウトを設定することが重要です。このタイムアウトはダウンストリームプロキシのタイムアウトよりも長くする必要があります。そうしないと、TCP接続のkeep-aliveタイムアウトに達した時点で、Node.jsはダウンストリームプロキシに通知することなくその接続を即座に終了します。これにより、プロキシがNode.jsによって既に終了された接続を再利用しようとするたびにプロキシエラーが発生します。
本番用Next.jsサーバーのタイムアウト値を設定するには、next startに--keepAliveTimeout（ミリ秒単位）を渡します:
next start --keepAliveTimeout 70000Node.js引数の渡し方
Node.js引数をnextコマンドに渡すことができます。例:
NODE_OPTIONS='--throw-deprecation' next
NODE_OPTIONS='-r esm' next
NODE_OPTIONS='--inspect' next