Next.jsとReactの関係

Next.js と React の関係

結論：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の進化系である。進化内容はこのようになっている。

• 大規模Webサイトの作成に向いている。
• 読み込み速度が速い
• SEO対策
• ローカル環境に依存しない
• 直感的な設計が可能
  

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