next CLI

Next.js CLIを使用すると、アプリケーションの開発、ビルド、起動などを行うことができます。

基本的な使用方法

ターミナル

npx next [command] [options]

リファレンス

以下のオプションが利用可能です

オプション	説明
`-h` または `--help`	利用可能なすべてのオプションを表示します
`-v` または `--version`	Next.jsのバージョン番号を出力します

コマンド

以下のコマンドが利用可能です

コマンド	説明
`dev`	ホットモジュールリロード、エラー報告などを使用して、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]`	アプリケーションをビルドするディレクトリ。指定しない場合、現在のディレクトリが使用されます。
`--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

サイズ: ページにクライアントサイドで移動する際にダウンロードされるアセットのサイズ。各ルートのサイズには、その依存関係のみが含まれます。
初回ロード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は、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 // Latest available version is detected (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>`	適用する修正の種類を指定します（例：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でhttps://:3000を使用します。デフォルトポートは、次のように-pオプションで変更できます。

ターミナル

next dev -p 4000

またはPORT環境変数を使用します。

ターミナル

PORT=4000 next dev

補足: HTTPサーバーの起動は他のコードが初期化される前に行われるため、PORTは.envで設定できません。

開発中のHTTPSの使用

Webhookや認証などの特定のユースケースでは、HTTPSを使用してlocalhost上にセキュアな環境を持つことができます。Next.jsは、--experimental-httpsフラグを使用してnext devで自己署名証明書を生成できます。

ターミナル

next dev --experimental-https

生成された証明書により、Next.js開発サーバーはhttps://: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でローカルに信頼された証明書を作成します。本番環境では、信頼できる認証局から適切に発行された証明書を使用してください。

補足: Vercelにデプロイする場合、Next.jsアプリケーションのHTTPSは自動的に構成されます。

ダウンストリームプロキシのタイムアウト設定

Next.jsをダウンストリームプロキシ（例：AWS ELB/ALBのようなロードバランサー）の背後にデプロイする場合、Nextの基盤となるHTTPサーバーを、ダウンストリームプロキシのタイムアウトよりも長いキープアライブタイムアウトで設定することが重要です。そうしないと、特定のTCP接続でキープアライブタイムアウトに達した場合、Node.jsはダウンストリームプロキシに通知することなく、その接続を直ちに終了します。

これにより、Node.jsが既に終了した接続を再利用しようとすると、常にプロキシエラーが発生します。

ターミナル

next start --keepAliveTimeout 70000

本番環境のNext.jsサーバーのタイムアウト値を設定するには、`next start`に`--keepAliveTimeout`（ミリ秒単位）を次のように渡します。

Node.js引数の引き渡し

ターミナル

NODE_OPTIONS='--throw-deprecation' next
NODE_OPTIONS='-r esm' next
NODE_OPTIONS='--inspect' next