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 の完全に匿名なテレメトリ収集を有効または無効にします。 |
Good to know: コマンドなしで
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
- 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 のテレメトリ収集を無効にします。 |
テレメトリについての詳細はこちらをご覧ください。
例
デフォルトのポートを変更する
デフォルトで 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 や認証などの特定の使用ケースにおいては、localhost 上で安全な環境を用意するために HTTPS を使用できます。Next.js は next dev で --experimental-https フラグを使用して自己署名証明書を生成できます：
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 サーバを、下流プロキシのタイムアウトよりも 長く なるようにキープアライブタイムアウトで構成することが重要です。そうしないと、特定の TCP 接続に対してキープアライブタイム アウトに達すると、Node.js は下流プロキシに通知することなくその接続を直ちに終了します。この結果、Node.js が既に終了した接続を再利用しようとするときにプロキシエラーが発生します。
本番 Next.js サーバのタイムアウト値を設定するには、次のように next start に --keepAliveTimeout（ミリ秒単位）を渡します：
next start --keepAliveTimeout 70000
Node.js 引数の渡し方
next コマンドに対して任意の node 引 数を渡すことができます。例えば：
NODE_OPTIONS='--throw-deprecation' next
NODE_OPTIONS='-r esm' next
NODE_OPTIONS='--inspect' next