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]`	アプリケーションをlintするベースディレクトリ。指定しない場合、現在のディレクトリが使用されます。
`-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サーバーの起動は他のどのコードよりも前に発生するため、.envでPORTを設定することはできません。

開発中にHTTPSを使用する

ウェブフックや認証のような特定のユースケースでは、localhost上でセキュアな環境を持つためにHTTPSを使用できます。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.jsサーバーのタイムアウト値を設定するには、--keepAliveTimeout（ミリ秒単位）をnext startに次のように渡します。

ターミナル

next start --keepAliveTimeout 70000

Node.js引数を渡す

任意のNode引数をnextコマンドに渡すことができます。例:

ターミナル

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