next CLI

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

基本的な使い方

npx next [command] [options]

リファレンス

利用可能なオプションは以下の通りです。

コマンド

利用可能なコマンドは以下の通りです。

知っておくと良いこと：コマンドなしでnextを実行するとnext devのエイリアスになります。

next dev オプション

next dev は、ホットモジュールリローディング (HMR)、エラーレポートなどを備えた開発モードでアプリケーションを起動します。next dev を実行する際に利用できるオプションは以下の通りです。

next build オプション

next build は、アプリケーションの最適化された本番ビルドを作成します。出力には各ルートに関する情報が表示されます。例：

Route (app)
┌ ○ /_not-found
└ ƒ /products/[id]
 
○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

next build コマンドで利用可能なオプションは以下の通りです。

next start オプション

next start は、本番モードでアプリケーションを起動します。アプリケーションはnext buildでコンパイルされている必要があります。

next start コマンドで利用可能なオプションは以下の通りです。

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/A

next info コマンドで利用可能なオプションは以下の通りです。

next telemetry オプション

Next.js は、一般的な使用方法に関する完全に匿名化されたテレメトリデータを収集します。この匿名プログラムへの参加は任意であり、情報を共有したくない場合はオプトアウトできます。

next telemetry コマンドで利用可能なオプションは以下の通りです。

テレメトリについてさらに学ぶ。

next typegen オプション

next typegen は、完全なビルドを実行せずに、アプリケーションのルートのTypeScript定義を生成します。これは、IDEのオートコンプリートやCIでのルート使用状況の型チェックに役立ちます。

以前は、ルート型はnext devまたはnext buildの実行中にのみ生成されていたため、tsc --noEmitを直接実行してもルート型は検証されませんでした。これで、型を個別に生成し、外部で検証できるようになりました。

# Generate route types first, then validate with TypeScript
next typegen && tsc --noEmit
 
# Or in CI workflows for type checking without building
next typegen && npm run type-check

next typegen コマンドで利用可能なオプションは以下の通りです。

出力ファイルは<distDir>/types（デフォルト：.next/types）に書き込まれます。

next typegen
# or for a specific app
next typegen ./apps/web

知っておくと良いこと：next typegen は、本番ビルドフェーズを使用してNext.jsの設定（next.config.js、next.config.mjs、またはnext.config.ts）をロードします。設定が正しくロードされるように、必要な環境変数と依存関係が利用可能であることを確認してください。

例

レンダリングエラーのデバッグ

next build中にレンダリングエラーが発生した場合、--debug-prerenderフラグを渡して、より詳細な出力を取得できます。

next build --debug-prerender

これにより、デバッグを容易にするためのいくつかの実験的なオプションが有効になります。

• サーバーコードの最小化を無効にします。
  • experimental.serverMinification = false
  • experimental.turbopackMinify = false
• サーバーバンドルのソースマップを生成します。
  • experimental.serverSourceMaps = true
• レンダリングに使用される子プロセスでソースマップの消費を有効にします。
  • enablePrerenderSourceMaps = true
• 最初のレンダリングエラーが発生した後もビルドを続行し、すべての問題を一度に確認できるようにします。
  • experimental.prerenderEarlyExit = false

これにより、ビルド出力でより読みやすいスタックトレースとコードフレームが表示されます。

注意：--debug-prerender は開発中のデバッグ専用です。--debug-prerender で生成されたビルドを本番環境にデプロイしないでください。パフォーマンスに影響を与える可能性があります。

特定のルートのビルド

--debug-build-paths オプションを使用して、App RouterとPages Routerの特定のルートのみをビルドできます。これは、大規模なアプリケーションで作業する際のデバッグを高速化するのに役立ちます。--debug-build-paths オプションは、カンマ区切りのファイルパスを受け入れ、グロブパターンもサポートします。

# Build a specific route
next build --debug-build-paths="app/page.tsx"
 
# Build more than one route
next build --debug-build-paths="app/page.tsx,pages/index.tsx"
 
# Use glob patterns
next build --debug-build-paths="app/**/page.tsx"
next build --debug-build-paths="pages/*.tsx"

デフォルトポートの変更

デフォルトでは、Next.jsは開発中およびnext startとともにhttps://:3000を使用します。デフォルトポートは、-pオプションを使用して次のように変更できます。

next dev -p 4000

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

PORT=4000 next dev

知っておくと良いこと：HTTPサーバーの起動は他のコードの初期化よりも前に行われるため、.envでPORTを設定することはできません。

開発中のHTTPSの使用

Webhooksや認証などの特定のユースケースでは、localhostで安全な環境を維持するためにHTTPSを使用できます。Next.jsはnext devで--experimental-httpsフラグを使用して自己署名証明書を生成できます。

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でローカルに信頼される証明書を作成します。本番環境では、信頼された認証局から発行された正規の証明書を使用してください。

下流プロキシのタイムアウト設定

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