buildとは
wikiから引用
ソフトウェアのビルド（英: build）は、プログラミング言語で書かれたソースコードファイルや各種リソースファイルを独立したソフトウェア生成物に変換するコンピュータ上で実行されるプロセス、またはその結果を指す。
自分なりの解釈だと、人間の書いたプログラムを機会が読めるようにする流れを全て行うことがビルド。その中にはコンパイルだとかリンクだとかパッケージ化が含まれている。という解釈。
じゃあnext buildは？
ドキュメントから引用
next buildは、アプリケーションに最適化された本番のビルドを作成します。出力にはそれぞれのルーティングに関する情報が表示されます。
Size – クライアントサイドのページへ移動する際にダウンロードされるアセットの数。各ルーティングのサイズには、依存関係のみが含まれます。
First Load JS – ページへアクセスしたときにサーバーからダウンロードされたアセットの数。すべてのアプリケーションで共有される JS の量は、別の指標として表示されます。
細かく調べてみたら色々しているみたい。
1.TypeScriptの型チェック
- ビルド開始時にTSの型チェックを行う
- 問題があるとエラーを返して終了する
2.静的ファイルのコピー
CDNとは
wikiより
CDNとは、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。
デプロイすると、オリジンサーバーにhtml,css,jsが保存される。その後CDNと言われる各地にある中継地点にコピーが保存され、ユーザーはそこからデータを取得する。そうすることで高速化とオリジンサーバーの負荷分散がされる
- アプリケーションのpublicディレクトリ内の静的ファイルをチェック
- コピーして.nextディレクトリや本番用の静的ホスティング環境に配置する
- コピーファイルは近くのCDNに配置され、最も近いエッジサーバーから高速に配信されるようになる
3.JavaScriptのトランスパイルとバンドル
- トランスパイル
- Next.jsは、Babelを使用してES6+やTypeScriptをブラウザが解釈できるJavaScriptに変換する
- バンドル
- Webpackを使用して、複数のJavaScriptファイルをまとめ、重複したコードを削除する
- 各ページの依存関係を最適化し、それぞれに必要な最小限のコードを含むバンドルを生成
4.ページの処理
Next.jsはルーティングと各ページごとの要件に応じて処理を変更する
1. 静的ページ作成
- ビルド時にHTMLとCSSに画像や動画の参照が埋め込まれ、生成されたページがそのまま配信できる形になる
2. サーバーレンダリング用の準備
- ビルド時にCSSやJavaScriptを最適化し、各ページに必要な最小限のファイルに分割される
5.アセットの最適化
アセットを簡単に知る
アセットとはIT用語辞典から引用
ビデオゲームやデジタルコンテンツの制作・開発では、その構成要素となる画像や3Dモデル、音楽、効果音などの素材のことをアセットということがある。
1. cssの最適化
- Tailwind CSSやPostCSSなどを使用している際、未使用のcssを削除
2. 画像の最適化
- ローカル画像や
/publicに保存された画像がビルド時に画像最適化され、CDNに置かれる
6.クライアントとサーバーの分離
Next.jsではビルド時にクライアント用とサーバー用のコードが明確に分離される
- クライアント側
- ブラウザで実行されるコードにトランスパイル（変換）され、最適化された状態で準備
- サーバー側
- サーバー用のエンドポイント（サーバーレス関数など）としてビルドされる
簡単なまとめ
Next.jsのビルドは一般的なコンパイル、リンク、パッケージ化に加えて静的サイト生成、サーバーレス化、クライアント/サーバー分離、最適化などアプリを効率的に提供する仕組みが備わっているぽい