はじめに

Next.jsはReactと何が違うのか、Next.jsの特徴、
公式チュートリアルで学んだことを自分用のメモとして簡単にまとめます。

以下の記事の続きです。
【初心者向け】 Next.js 公式チュートリアル学習記録1

Pre-rendering and Data Fetching

Pre-rendering

通常、Next.jsでは事前にすべてのページを静的HTMLレンダリングする。(プレレンダリングする)
ブラウザの負荷を下げられる
→Next.jsではブラウザのJavaScriptを無効にしてもページが表示されるが、Reactでは表示されない。
結果、パフォーマンスとSEOが向上する。

Two Forms of Pre-rendering

事前レンダリングにはStatic GenerationとServer-side Renderingの2つの形式がある。
Static Generation…ビルド時にhtmlをレンダリングする。
Server-side Rendering…リクエスト事にhtmlをレンダリングする。

Next.js では、ページごとに事前レンダリングの形式を選択できる。
ほとんどのページでSG、その他のページではSSRを使用して、ハイブリッドなNext.js アプリを作成できる。
可能な限りSGが望ましい。
SNSや動画配信アプリなど、リアルタイムであることが重視されるものはSSGで作成するとよい。

データの取得あるなしにかかわらず、SGを実行できる。
データを取得する場合は、「getStaticProps」を用いる。
「getStaticProps」はサーバー側で実行される。

SSRの場合は、「getServerSideProps」を用いる。

Next.jsでもCSRが使用できる。
使用するときは、SEOが関連しない非公開ページを作成するときなど。

以下の記事にレンダリングについて詳しく解説されていた
Next.jsにおけるSSG（静的サイト生成）とISRについて（自分の）限界まで丁寧に説明する

Dynamic Routes

動的ルートはページのコンテンツへのルート(ファイルパス)が外部データに依存する場合に使用する。
動的なURLを作成することができる。
動的なページは[]で囲む。

「getStaticPaths」でパスを作れる

fallback

存在しないurlをたたいたときどういう動きをするか設定する

Catch-all Routes

動的ルートの階層構造を深くすることができる

参考記事

Next.js　チュートリアル
 【日本一わかりやすいNext.js入門】#1 講座の概要