next CLI
Next.js CLIを使用すると、アプリケーションの開発、ビルド、開始などができます。
基本的な使用法：
npx next [command] [options]
リファレンス
次のオプションが利用可能です：
| オプション | 説明 |
|---|---|
-h または --help | 利用可能なすべてのオプションを表示します |
-v または --version | Next.jsのバージョン番号を出力します |
コマンド
次のコマンドが利用可能です：
| コマンド | 説明 |
|---|---|
dev | Hot Module Reloading、エラーレポートなどを備えた開発モードでNext.jsを開始します。 |
build | アプリケーションの最適化された本番ビルドを作成します。各ルートに関する情報を表示します。 |
start | 本番モードでNext.jsを開始します。アプリケーションは最初にnext buildでコンパイルされている必要があります。 |
info | Next.jsのバグを報告するために使用できる現在のシステムに関する関連情報を出力します。 |
lint | /src、/app、/pages、/components、および/libディレクトリ内のすべてのファイルに対してESLintを実行します。ESLintがアプリケーションでまだ設定されていない場合、必要な依存関係をインストールするためのガイド付きセットアップも提供します。 |
telemetry | Next.jsの完全に匿名のテレメトリー収集を有効または無効にすることができます。 |
Good to know: コマンドなしで
nextを実行すると、next devのエイリアスになります。
next devオプション
next devは、Hot Module Reloading（HMR）、エラーレポートなどを備えた開発モードでアプリケーションを開始します。next devを実行する際に利用可能なオプションは次のとおりです：
| オプション | 説明 |
|---|---|
-h, --help | 利用可能なすべてのオプションを表示します。 |
[directory] | アプリケーションをビルドするディレクトリ。指定しない場合は、現在のディレクトリが使用されます。 |
--turbopack | 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) Size First Load JS
┌ ○ /_not-found 0 B 0 kB
└ ƒ /products/[id] 0 B 0 kB
○ (Static) prerendered as static content
ƒ (Dynamic) server-rendered on demand
- Size: クライアント側でページに移動する際にダウンロードされるアセットのサイズ。各ルートのサイズにはその依存関係のみが含まれます。
- First Load 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）などが含まれます。
出力は次のようになります：
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.6.0
Available memory (MB): 65536
Available CPU cores: 10
Binaries:
Node: 20.12.0
npm: 10.5.0
Yarn: 1.22.19
pnpm: 9.6.0
Relevant Packages:
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 Config:
output: N/A
next 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の厳格な設定を使用して.eslintrc.jsonファイルを作成します。 |
--rulesdir, <rulesdir...> | このディレクトリから追加のルールを使用します。 |
--fix | リンティングの問題を自動的に修正します。 |
--fix-type <fixType> | 適用する修正のタイプを指定します（例：問題、提案、レイアウト）。 |
--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のテレメトリー収集を無効にします。 |
Telemetryについて詳しく学びましょう。
例
デフォルトポートの変更
デフォルトでは、Next.jsは開発中およびnext startでhttp://localhost:3000を使用します。デフォルトのポートは、次のように-pオプションで変更できます：
next dev -p 4000
または、PORT環境変数を使用します：
PORT=4000 next dev
Good to know:
PORTは.envで設定できません。HTTPサーバーの起動は他のコードが初期化される前に行われるためです。
開発中にHTTPSを使用する
Webhookや認証などの特定のユースケースでは、HTTPSを使用してlocalhostで安全な環境を持つことができます。Next.jsは、--experimental-httpsフラグを使用してnext devで自己署名証明書を生成できます：
next dev --experimental-https
生成された証明書を使用すると、Next.js開発サーバーはhttps://localhost:3000に存在します。ポートが-p、--port、またはPORTで指定されない限り、デフォルトのポート3000が使用されます。
--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.pem
next 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 70000
Node.js引数を渡す
任意のnode引数をnextコマンドに渡すことができます。例：
NODE_OPTIONS='--throw-deprecation' next
NODE_OPTIONS='-r esm' next
NODE_OPTIONS='--inspect' next