next CLI

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

基本的な使用方法:

npx next [コマンド] [オプション]

リファレンス

以下のオプションが利用可能です:

コマンド

以下のコマンドが利用可能です:

豆知識: next をコマンドなしで実行すると next dev のエイリアスになります。

next dev オプション

next dev は Hot Module Reloading (HMR)、エラー報告などを備えた開発モードでアプリケーションを起動します。next dev を実行する際に以下のオプションが利用可能です:

next build オプション

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

Route (app)                              Size     First Load JS
┌ ○ /_not-found                          0 B               0 kB
└ ƒ /products/[id]                       0 B               0 kB

○  (Static)   静的コンテンツとして事前レンダリング
ƒ  (Dynamic)  オンデマンドでサーバーサイドレンダリング

• Size: クライアントサイドでページにナビゲートする際にダウンロードされるアセットのサイズ。各ルートのサイズにはその依存関係のみが含まれます。
• First Load JS: サーバーからページを訪問する際にダウンロードされるアセットのサイズ。すべてで共有される JS の量は別の指標として表示されます。

これらの値は両方とも gzip で圧縮 されています。初回読み込みは緑、黄、赤で表示されます。パフォーマンスの高いアプリケーションのためには緑を目指してください。

next build コマンドには以下のオプションが利用可能です:

next start オプション

next start はプロダクションモードでアプリケーションを起動します。まず next build でアプリケーションをコンパイルする必要があります。

next start コマンドには以下のオプションが利用可能です:

next info オプション

next info は GitHub イシュー を開く際に 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 コマンドには以下のオプションが利用可能です:

next lint オプション

next lint は pages/、app/、components/、lib/、src/ ディレクトリ内のすべてのファイルに対して ESLint を実行します。また、ESLint がアプリケーションに設定されていない場合、必要な依存関係をインストールするためのガイド付きセットアップも提供されます。

next lint コマンドには以下のオプションが利用可能です:

next telemetry オプション

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

next telemetry コマンドには以下のオプションが利用可能です:

テレメトリ について詳しく学ぶ。

例

デフォルトポートの変更

デフォルトでは、Next.js は開発時および next start 実行時に http://localhost:3000 を使用します。デフォルトポートは -p オプションで変更できます:

next dev -p 4000

または PORT 環境変数を使用することも可能です:

PORT=4000 next dev

補足: PORT は .env ファイルでは設定できません。HTTPサーバ゙ーが起動する際には他のコードが初期化される前であるためです。

開発時の HTTPS 使用

ウェブフックや認証などの特定のユースケースでは、HTTPS を使用して localhost 上で安全な環境を構築できます。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 を使用してローカルで信頼された証明書を作成します。本番環境では、信頼できる認証局から発行された適切な証明書を使用してください。

ダウンストリームプロキシのタイムアウト設定

Next.js をダウンストリームプロキシ（例: AWS ELB/ALB のようなロードバランサー）の背後にデプロイする場合、Next.js の基盤となる HTTP サーバ゙ーにダウンストリームプロキシのタイムアウトよりも長い keep-alive タイムアウト を設定することが重要です。そうしないと、TCP 接続の keep-alive タイムアウトに達した場合、Node.js はダウンストリームプロキシに通知することなくその接続を直ちに終了します。これにより、Node.js がすでに終了した接続をプロキシが再利用しようとするたびにプロキシエラーが発生します。

本番環境の Next.js サーバーのタイムアウト値を設定するには、next start に --keepAliveTimeout（ミリ秒単位）を渡します:

next start --keepAliveTimeout 70000

Node.js 引数の渡し方

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

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