なぜNext.jsを使用するのか
素のReactを使用すると、構文以外でつまづきやすいため。
ReactのフレームワークであるNext.jsを使用。
素のReactで躓きやすいポイント
・ルーティング
・cssモジュール
・SSR/SGらへん
Next.jsの代表的な機能
・image optimization
ブラウザで画像を読み込む際に、最適化してくれる機能。
・internationalization
国際化対応。
海外にサイトを展開するときに便利。
・Next.js Analytics
Next.jsとVercelを組み合わせることで、Next.jsの分析等を行える。
・Zero Config
Next.jsでは、我々があまり設定をしなくても様々な機能を使えるように作られている。
・Hyblid :SSG and SSR
ブラウザの読み込み方を設定することができる。
より早く滑らかに表示させるための機能。
・Incremental Static Generation
上記と似ている。
・TypeScript Support
文字通り、typescriptをサポートしている。
・Fast Refresh
開発体験をよくするためのもの。
自動で有効化になっているため、そこまで気にしなくていい。
・File-system Routing
Next.jsの規則性に従ってファイルを作れば、自動でURLを生成してくれる。
・API Routes
APIの構築を容易にする。
・Built-in css support
最初からcssModulesを使える。
・code-splitting andBundling
Next.jsアプリケーションを本番環境で動かすときに、最適化してくれる。
初期のファイルの中身
・.next
Next.jsを動かすためのファイル。
その他のファイルを.nextにコンパイルして、動かしている。
要は裏側でwebpackが動いているけれども、Zero Configによって設定なしでコンパイルしてくれている。
・package.json
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
buildを実行すると.nextの中に本番環境用のビルドされたファイルが生成される。さらに、
startを実行するとwebに反映されるが、devを使用するよりもファイルが圧縮されたりしている。
（vercel側はstartを使用している）
もちろんdevにも利点があり、開発時に最適化されているため、コードを変更したら自動で反映されたりする。
・pages
ファイルシステムルーティングの軸となる場所。
・public
静的なファイルを設置しておく場所。
アイコンや画像。
おまけ
上記と被るところがあると思うが、具体的な事例を紹介。
Reactではページが読み込まれるときに、一度真っ白な画面になってからページが読み込まれる。
それに比べてNext.jsは最初からページが表示される。
↓
理由は処理が重いJSを後回しにして、先にHTMLを読み込んでいるから。（SSG,SSR）