next dev
開発時にはこれを実行します。リクエストの都度サーバーサイドでページの生成(SSG)、クライアントサイドでレンダリング(CSR)が実行されるのでページの取得はページ遷移は遅くなります。
具体的な挙動
- 「getStaticProps」を使っている場合はリクエストの都度実行される。
- 「getStaticPaths」を使っている場合もリクエストの都度実行される。
next build
「本番ビルド」です。
具体的な挙動
- 「getStaticProps」を使っている場合は、「.next/server」フォルダの中の「pages」にgetStaticProps内でprefetch(node-fetchなど)したデータが埋め込まれた状態で出力される。
- 「getStaticPaths」を使っている場合は、「.next/server/pages/[フォルダ名]/[ページ番号].html」がページ数分だけ一括で事前に生成される。
next export
事前に「next build」を行わないと実行できません。
静的リソースを生成します（Reactと同じように）。SSRやprefetchは「yarn build」を行った最初だけ行われて、その後は、完全にクライアントサイドレンダリング(CSR)になるので、SSRやSSGを本格的に使わないのであれば有効な手法になります。
具体的な挙動
プロジェクトルート直下にoutフォルダができます。
注意点
「next/image」コンポーネントは使えないです。
next start
Next.jsのサーバーを立ち上げます。SSGをビルド時のみに行うので、ページ遷移時にサーバーサイドへリクエストは改めて行わないため非常に高速に動作を行います。
next lint
eslintが実行されます。2021年のNext.jsバージョン11からデフォルトでpackage.jsonのスクリプトタグに追加されるようになりました。
- eslintとeslint-config-nextのインストールを求められます。
- まだプロジェクトにeslintの設定ファイルが作成されていない場合は「.eslintrc」の作成を促されます。
- 設定ファイルがある場合はeslintの検査ルールに従って検査が実行されます。
eslint-config-nextの設定
以下のプラグインがあります。
- react
- react-hooks
- import
- jsx-a11y
この記事へのコメントはありません。