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 | 使用可能なすべてのオプションを表示します。 |
[ディレクトリ] | アプリケーションをビルドするディレクトリ。指定しない場合、現在のディレクトリが使用されます。 |
--turbo | 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 | 使用可能なすべてのオプションを表示します。 |
[ディレクトリ] | アプリケーションをビルドするディレクトリ。指定しない場合は、現在のディレクトリが使用されます。 |
-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 | 使用可能なすべてのオプションを表示します。 |
[ディレクトリ] | アプリケーションを起動するディレクトリ。ディレクトリを指定しない場合は、現在のディレクトリが使用されます。 |
-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 // 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/Anext infoコマンドで使用可能なオプションは以下のとおりです。
| オプション | 説明 |
|---|---|
-h または --help | 使用可能なすべてのオプションを表示します。 |
--verbose | デバッグのための追加情報を収集します。 |
next lint オプション
next lintは、pages/、app/、components/、lib/、src/ディレクトリ内のすべてのファイルに対してESLintを実行します。また、ESLintがアプリケーションにまだ設定されていない場合は、必要な依存関係をインストールするためのガイド付き設定も提供します。
next lintコマンドで使用可能なオプションは以下のとおりです。
| オプション | 説明 |
|---|---|
[ディレクトリ] | アプリケーションを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サーバーの起動は他のコードが初期化される前に行われるため、
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.pemnext dev --experimental-https は開発目的のみを意図したものであり、mkcert を使用してローカルで信頼できる証明書を作成します。本番環境では、信頼できる認証機関から適切に発行された証明書を使用してください。
ご参考：Vercel にデプロイする場合、Next.js アプリケーションの HTTPS は自動的に設定されます。
ダウンストリームプロキシのタイムアウト設定
Next.js をダウンストリームプロキシ（例：AWS ELB/ALB などのロードバランサー）の後ろにデプロイする場合、キープアライブタイムアウト を使用して Next.js の基盤となる HTTP サーバーを設定することが重要です。ダウンストリームプロキシのタイムアウトよりも長いタイムアウトを設定する必要があります。 そうしないと、特定の TCP 接続のキープアライブタイムアウトに達すると、Node.js はダウンストリームプロキシに通知することなく、その接続をすぐに終了します。これにより、Node.js が既に終了した接続を再利用しようとしたときに、プロキシエラーが発生します。
本番環境の Next.js サーバーのタイムアウト値を設定するには、--keepAliveTimeout（ミリ秒単位）をnext startに渡します。例:
next start --keepAliveTimeout 70000Node.js 引数の渡す
Node.js の引数 を next コマンドに渡すことができます。例:
NODE_OPTIONS='--throw-deprecation' next
NODE_OPTIONS='-r esm' next
NODE_OPTIONS='--inspect' nextお役に立ちましたか？