お母さんでもわかるNext.js✖️React

そもそもNext.jsとは

Reactベースのフレームワーク。

Next.js と Create React Appとの違いは？

代表的な違い
・Nextにはサーバー機能がある
・NextにはURLルーティングがある。→ファイルに合わせてURJ¥L生成をしてくれる
・Nextは画像、レンダリング(SSRとか)を最適化してくれる
・Nextには「ゼロコンフィグ機能」→webpack等のパッケージインストール、設定の必要がない。
・Reactの方が他フレームワークに組み込みやすい

CSR(SPA)、SSR、SG、ISRについて

・CSR(SPA)
クライアント側でレンダリングを行う方法。
最初にブラウザへからのHTMLを渡し、ページ全体をJSで生成しています。
一度読み込んでしまえば、ページ遷移のたびにサーバーへのリクエストが発生しないため高速で動作させることが可能。
ただ問題点がいくつかあり、JSのサイズが膨大になると初期表示の読み込みに時間がかかったり、表示速度はクライアント側に依存するためスペック次第で表示速度が変わる。

・SSR
CSRの問題を解決するために、レンダリングをサーバー側で行い、動的なHTMLを生成してからクライアントに渡す方法ができた。それがSSR。（CSRの作業をサーバー側でやっちゃえって感じ！）
でかいJSを送信しなくて済むが、今度はサーバー側の負担が問題になる。

・SG
SSRの問題を解決するために事前に静的なHTMLを生成しておこう。というのがSG。
負担は減ったが、頻繁に更新されるサイトには不向き。何故ならデプロイ時に静的HTMLを作成するのだが、デプロイ後にページの内容を動的に変更しづらいため。

・ISR
SGの問題を解決るすために、「SSR」と「SG」のいいとこ取りをしたのがISR。
SSRのようにリクエストに応じて動的なHTMLを作成するが、実際にクライアントに渡すのは既に作成済み(一つ前)の静的なHTML。
そのためSGと同じレベルでレスポできる。

・ルーティング
pagesディレクトリ内の各Reactコンポーネントは、そのURLパスに対応するルートとして扱われます。
※また、Next.jsは、ルーティングの一部としてパラメータを指定するできる動的ルーティングをサポートしています。

・APIルート
サーバーサイドの処理を簡単に実行でき、クライアントとサーバーの間の通信をスムーズに行うことができるもの。
Next.jsのpages/apiディレクトリ内に作成されるJavaScriptファイルによって定義されている。

各フォルダについて

・.next
next.jsを動かすためのファイル。
webpackと同じように（srcディレクトリの中をwebpackを使用してコンパイルし、distファイルの中にコンパイル後のファイルを配置）、pages,public,stylesなどを.nextファイルにコンパイルして動かしている。
※「webpackと同じように」というか、裏でしっかり動いてます。

・node_modules,package.json,yarn.lock

package.json

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },

"dev": "next dev" →基本ここで開発をスタート
"build": "next build"→本番環境を確認したいときに、この2行を実行する
"start": "next start"

・pages
ファイルシステムルーティングの最も重要なところ。ようは、表示させるページが入ってるよ！！

・public
画像やアイコンなどの静的なもんのが入っているファイル