【Next.js】各種コマンドについて

next dev

開発時にはこれを実行します。リクエストの都度サーバーサイドでページの生成(SSG)、クライアントサイドでレンダリング(CSR)が実行されるのでページの取得はページ遷移は遅くなります。

「本番ビルド」です。

「getStaticProps」を使っている場合は、「.next/server」フォルダの中の「pages」にgetStaticProps内でprefetch(node-fetchなど)したデータが埋め込まれた状態で出力される。
「getStaticPaths」を使っている場合は、「.next/server/pages/[フォルダ名]/[ページ番号].html」がページ数分だけ一括で事前に生成される。

事前に「next build」を行わないと実行できません。

静的リソースを生成します（Reactと同じように）。SSRやprefetchは「yarn build」を行った最初だけ行われて、その後は、完全にクライアントサイドレンダリング(CSR)になるので、SSRやSSGを本格的に使わないのであれば有効な手法になります。

プロジェクトルート直下にoutフォルダができます。

「next/image」コンポーネントは使えないです。

Next.jsのサーバーを立ち上げます。SSGをビルド時のみに行うので、ページ遷移時にサーバーサイドへリクエストは改めて行わないため非常に高速に動作を行います。

eslintが実行されます。2021年のNext.jsバージョン11からデフォルトでpackage.jsonのスクリプトタグに追加されるようになりました。

以下のプラグインがあります。