Next.js CLI

Next.js CLI は、アプリケーションを start、build、そして export することを許可します。

利用可能な CLI コマンドのリストを取得するには、プロジェクトディレクトリ内で次のコマンドを実行します。

npx next -h

(npx は npm 5.2+以上と一緒になっています)

出力は次のようになるべきです：

Usage
  $ next <command>

Available commands
  build, start, export, dev, lint, telemetry, info

Options
  --version, -v   Version number
  --help, -h      Displays this message

For more information run a command with the --help flag
  $ next build --help

node arguments をnextコマンドに渡すことができます：

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

Good to know: nextをコマンドなしで実行することは、next devを実行するのと同じです

Build

next buildは、アプリケーションの最適化された production build を作成します。出力は、各 route に関する情報を表示します。

• Size – ページにクライアント側から移動したときにダウンロードされるアセットの number 。各 route の size は、その依存関係のみを含みます。
• First Load JS – ページを server から訪れたときにダウンロードしたアセットの number 。すべてが共有する JS の量は別の指標として表示されます。

これらの値は両方ともcompressed with gzipで圧縮されています。最初のロードは緑、黄色、または赤で示されます。パフォーマンスの高いアプリケーションを目指して、緑を目指してください。

next buildで--profileフラグを使用して、React の製造プロファイリングを有効にすることができます。これにはNext.js9.5 が必要です。

next build --profile

その後、development で使用するのと同じ方法でプロファイラを使用できます。

next buildで--debugフラグを使用すると、より詳細な build の出力を有効にすることができます。これには、Next.js 9.5.3 が必要です：

next build --debug

このフラグが有効になると、追加の build 出力、例えば rewrites、redirects、そして headers が表示されます。

Development

next devは Hot-code リ Loading、error レポーティングなどで、アプリケーションを development モードで起動します：

アプリケーションは default port で http://localhost:3000 から start します。 default ポート は -p を使って、以下のように変更することができます:

npx next dev -p 4000

または、PORT環境の variable を使用して：

PORT=4000 npx next dev

Good to know: PORTは.envで設定することができません。というのも HTTP server の起動は、他のすべての code が初期化される前に行われるからです。

hostname を 0.0.0.0 の default とは異なるものに設定することもできます。これは、ネットワーク上の他のデバイスでアプリケーションを利用可能にするために有用です。 default hostname は -H を用いて次のように変更することができます：

npx next dev -H 192.168.1.2

ローカルの Development のための HTTPS

特定の使用例、たとえば webhooks や認証では、localhostで安全な環境を持つために HTTPS を使用する必要があるかもしれません。Next.js は、next devを用いて自己署名証明書を生成することができます。それは次のように行います：

next dev --experimental-https

あなたはまた、--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を使用してローカルで信頼された証明書を作成するためのものであり、 development 用途にのみ意図されています。 production では、信頼された機関から正しく発行された証明書を使用してください。Vercel にデプロイすると、あなたの Next.js アプリケーションに対して HTTPS は自動的に設定 されます。

Production

next startは、アプリケーションを production モードで起動します。アプリケーションは、最初にnext buildでコンパイルする必要があります。

アプリケーションは default port で http://localhost:3000 から start します。 default ポート は -p を使って、以下のように変更することができます:

npx next start -p 4000

または、PORT環境の variable を使用して：

PORT=4000 npx next start

Good to know:

• PORTは、他のすべての code が初期化される前に、 HTTP server の起動が行われるため、.env内で設定することはできません。

• next startはoutput: 'standalone'やoutput: 'export'と一緒に使用することはできません。

Keep Alive Timeout を維持する

ダウンストリームプロキシ(例：AWS ELB/ALB のようなロードバランサー)の背後で Next.js をデプロイする際は、ダウンストリームプロキシのタイムアウトよりも 大きい キープアライブのタイムアウト を HTTP server で設定することが重要です。さもなければ、特定の TCP 接続のキープアライブタイムアウトが達成されると、Node.js はその接続をダウンストリームプロキシに通知せずにすぐに終了します。これは、Node.js が既に終了した接続を再利用しようとするたびに、プロキシが error を起こす結果となります。

production Next.js server のタイムアウト値を設定するには、--keepAliveTimeout(ミリ秒単位)をnext startに渡します。以下のように行います：

npx next start --keepAliveTimeout 70000

Info

next infoは、現在のシステムに関する関連詳細を出力し、これを使用して Next.js のバグを報告することができます。この情報には、オペレーティングシステムのプラットフォーム/アーキテクチャ/versions、バイナリ(Node.js、npm、Yarn、pnpm)および npm パッケージ versions(next、react、react-dom)が含まれます。

あなたのプロジェクトの root ディレクトリで以下を実行：

next info

このような例のような情報を提供します：

Operating System:
  Platform: linux
  Arch: x64
  Version: #22-Ubuntu SMP Fri Nov 5 13:21:36 UTC 2021
  Available memory (MB): 31795
  Available CPU cores: 16
Binaries:
  Node: 16.13.0
  npm: 8.1.0
  Yarn: 1.22.17
  pnpm: 6.24.2
Relevant Packages:
  next: 14.1.1-canary.61 // Latest available version is detected (14.1.1-canary.61).
  react: 18.2.0
  react-dom: 18.2.0
Next.js Config:
  output: N/A

この情報はその後、GitHub の Issues に貼り付けるべきです。

あなたはまたnext info --verboseを実行することも可能で、これによりシステムや、nextに関連するパッケージのインストールについての追加情報が出力されます。

Lint

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

他のディレクトリをリントしたい場合は、--dir フラグを使用して指定できます：

next lint --dir utils

Telemetry

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

テレメトリーについてもっと学びたい方は、こちらの document をご覧ください。