More than 1 year has passed since last update.

Next.jsとReactの関係

Last updated at 2022-05-10Posted at 2022-05-10

Next.js と React の関係

結論：Next.jsはReactのフレームワークである。
※ フレームワーク：より使いやすい形に変更したもの(進化系)

もう少し詳しくいうと、下の図のようなフレームワークの関係になっている。

Next.jsはReactのフレームワーク(進化系)というくらいなので、もちろんNext.jsの方が使いやすい。

作成するwebサイトの規模感の違い
- Reactはページ数の少ない小規模なwebサイトの作成に向いている
- Next.jsはECサイト（amazonのページ)やSNS(Twitter)などの大規模なページ制作に向いている。
読み込み速度の違い
- ReactはhtmlとJavaScriptが同時に読み込まれるので、読み込み速度が遅くなる
- Next.jsは先にhtmlが出力され、その後必要に応じてJavaScriptが読み込まれるプリレンダリング方式なので、読み込み速度が速い。
SEO対策
- 先の説明の通り、Next.jsは初回読み込み時にhtmlが出力されるため、SEO対策になる。
ローカル環境のスペックへの依存
- Reactはローカル環境でレンダリングを完結するため、ローカル環境のスペックに依存してしまう。
  - CSRと言われるレンダリング方式
- Next.jsはサーバー側でレンダリングが完結するため、ローカル環境のスペックに依存しない。（つまり、ローカル環境のせいで読み込みが遅くなることがない）
  - SSGもしくはSSRのいずれかのレンダリング方式（SSGとSSRの違いは次の記事に記載する)
設計の特徴
- Next.jsは直感的なルーティング設計ができる。

Next.jsはReactの進化系である。進化内容はこのようになっている。

次は、Next.jsの２つのレンダリング手法、SSG(Static Site Generation:静的生成)とSSR(Sever Side Rendering)の違いについての記事を書く。