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、env: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、env: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を使用する
Webhooksや認証のような特定のユースケースのために、localhost
上で安全な環境を持つために HTTPSを使用することができます。 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引数を渡す
next
コマンドに任意の node引数を渡すことができます。例えば:
NODE_OPTIONS='--throw-deprecation' next
NODE_OPTIONS='-r esm' next
NODE_OPTIONS='--inspect' next