Next.js のコードを読んでみよう！
皆さんは Next.js を使っていて、その内部構造が気になったことはないですか？
私はあるんで、そのソースコードを読んでみて、何個かプルリクを送るようになりました。ただ全エンジニアが Next.js を理解するのに、いきなりソースコードを読むのは難しすぎると感じました。
なので、もっと簡単に Next.js の内部構造を説明してみようという！、というのがこの記事の意図です。
この記事が、Next.js のソースコードを読む一助になれば幸いです。
Next.js をレストランに例えてみた
Next.js は、ファミレスのようなセントラルキッチン式のレストランに似ています。
セントラルキッチン式のレストランでは、以下の流れで最初に料理を作るからお客様に料理が届くまでします。
- レストランとは別の位置にある外注の調理場で、料理を作る
- 1で作った料理を冷蔵庫で冷凍し、レストランに運ぶ
- お客様が来たら、ウェイターがお客様から注文を伺う
- 2で作った料理を、炒めるか電子レンジで温める
- 料理を運び、お客様に料理が届く
これがどうなれば、Next.js になるのでしょうか？
説明してみましょう！
1. レストランとは別の位置にある調理場で、料理を作る
これは、Next.jsのプロジェクトで pages か app 配下に React のファイルを作る部分に当たります。
Create-react-app純製の React を使うなら、わざわざ「レストランとは別の位置にある調理場で、料理を作る」必要はありませんが、どの料理が出てくるか分からない（ユーザーがどのページを見るか分からない）ので全ての料理を作る必要があります（react-router で全ての <Route> を定義している部分）
2. 1で作った料理を冷蔵庫で冷凍し、レストランに運ぶ
ここでいう 冷蔵庫は webpack のことです。webpack とは Javascript のファイルの依存関係を解決し１つのファイルにまとめてくれるライブラリです。
Next.js のビルドフェーズ（yarn devかyarn build）では、.nextというフォルダに、Next.jsの設定（マニフェストファイル）や pages か app 配下にある Reactファイルをwebpackでbundleした結果（.next/server/app/パスなどにある）が作られます。
アクセスが来る（お客様が来る）と、.nextの中にあるマニフェストファイルが使用され、簡単に言えば bundleされたReactのファイルが送られます（後半 3以降）。
Next.js だと packages/next/src/build の配下の部分を指し、
などに主な設定があります。
3. お客様が来たら、ウェイターがお客様から注文を伺う
ここは、アクセスが来た時にサーバーがパスを見ている部分です。
「お客様が来る」はアクセスが来たことを、「注文を伺う」はアクセスしてきたパス（https://qiita.com/trend なら /trend 部分）をサーバーが解析することを指します。
パスを見る時は、アクセスの来たパスが既存のものと一致するかどうかを判定し、一致するものがない場合は 404 を返します。
Next.js だと router-server.ts
を起点にして、
の主な２ファイルで、アクセスの来たパスが一致するかを判定しています。
4. 3で伺ったメニューと合致する 2で作った料理を、炒めるか電子レンジで温める
3で一致したパスの React ファイルを、サーバーサイドでレンダーする部分がここに当たります。
ここでは、場合によっては2で作った料理以外の外注している料理を調達（外部APIへのリクエスト）して、料理を組み合わせることもできます。
炒めるか電子レンジで温めるかの前には、冷蔵庫からそれを取り出す部分もあると思いますが、それは
（loadComponents）で行っています。中身を見れば、getServerSideProps や getStaticProps を import しているのが分かると思います。
そこから実際に炒めたり電子レンジで温める部分が、app-router だと
pages-router だと
にあります。
呼び出し元はここら辺です
findPageComponents が loadModules を呼び出し、その先の renderToResponseWithComponents では page-router は ここ で、app-router は ここ で 呼び出されています。
5. 料理を運ぶ、お客様に料理が届く
結果、アクセスしたクライアントに送り届ける部分です。
クライアントに届いてからは、料理が一人でに動き出すわけではない（再レンダー）ので、説明は省きます。
追加説明
build の方をあまり見ることはないかもしれないので、server の方で説明を追加しますが、server は
の継承関係で、中身が作られています。興味があったら、見てみてもいいかもしれません。
cli のエントリーポイントは
です。
まとめ
Next.js を簡単にまとめると、build で Reactファイルを bundle して、router でどのReactファイルを表示するかを決めて（正確にいうと違いますが）、render でReactファイルを表示しています。
書きながら、普通のサーバーの説明と変わらないなと思いつつも、Next.js のソースコードリーディングも思っている以上に難しくなさそうだな、と思えてもらえたら嬉しいです。