🚀

【Next.js和訳】API Reference/CLI

3 min read

この記事について

株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。

この記事は、API Reference/CLI の記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Next.js CLI

Next.jsのCLIでは、アプリケーションの起動、ビルド、エクスポートを行うことができます。

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

npx next -h

(npx comes with npm 5.2+ and higher)

出力は以下のようになります。

Usage
  $ next <command>
Available commands
  build, start, export, dev, lint, telemetry
Options
  --version, -v   Version number
  --help, -h      Displays this message
For more information run a command with the --help flag
  $ next build --help

nextコマンドには、任意のノード引数を渡すことができます。

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

Build

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

  • Size - クライアントサイドでページに移動した際にダウンロードされたアセットの数です。各ルートのサイズには、その依存関係のみが含まれます。
  • First Load JS - サーバーからページにアクセスする際にダウンロードされるアセットの数です。すべての人が共有するJSの量は、別の指標として表示されます。

最初の負荷は、緑、黄色、または赤で示されます。パフォーマンスの高いアプリケーションでは緑を目指します。

Reactのプロダクションプロファイリングを有効にするには、next build--profileフラグを指定します。これにはNext.js 9.5が必要です。

next build --profile

その後は、開発時と同じようにプロファイラを使うことができます。

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

next build --debug

このフラグを有効にすると、書き換えやリダイレクト、ヘッダーなどの追加のビルド出力が表示されます。

開発

next dev はアプリケーションを開発モードで起動し、ホットコードのリロードやエラーレポートなどを行います。

アプリケーションは、デフォルトでは http://localhost:3000 で起動します。デフォルトのポートは -p で次のように変更できます。

npx next dev -p 4000

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

PORT=4000 npx next dev

注意
HTTPサーバーの起動は他のコードが初期化される前に行われるため、PORT.envで設定することはできません。

また、ホスト名をデフォルトの0.0.0.0とは異なるものに設定することもできます。これは、ネットワーク上の他のデバイスからアプリケーションを利用できるようにするのに便利です。これは、ネットワーク上の他のデバイスからアプリケーションを利用できるようにするのに便利です。デフォルトのホスト名は、-Hで以下のように変更できます。

npx next dev -H 192.168.1.2

本番

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

アプリケーションは、デフォルトでは http://localhost:3000 で起動します。デフォルトのポートは -p で次のように変更できます。

npx next start -p 4000

または、環境変数PORTを使って変更することもできます。

PORT=4000 npx ネクストスタート

注意
HTTPサーバーの起動は他のコードが初期化される前に行われるため、.envPORTを設定することはできません。

Lint

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

もし、他のディレクトリでもLintを実行したい場合は、--dirフラグを使って指定できます。

next lint --dir utils

Telemetry

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

Telemetryについての詳細は、このドキュメントをお読みください をご覧ください。

Discussion

ログインするとコメントできます