ReactとNext.jsの違いとは何ぞや？

概要

React、Next.jsはフロントエンド開発では主流になってきています。
だけどこの2つの違いがよくわからんって方が多い感じはします。
そこで両者の違いについて書いていきたいと思います。

フロントエンド開発のニーズは凄い

多くのWebサービスではVueやReactなどのフロントエンド開発が増えてきました。
バックエンドと比べるとユーザーの目に映るので、かなり重要なポジションですし、
サービスの改善案なども出しやすいです。

Reactとは

Webアプリケーションなどの見た目や操作(UI)で使われるJavaScriptのライブラリーです。
自分も以前勘違いしていましたが、Reactはフレームワークではありません。

●補足
ライブラリーは開発者が開発をしやすくなる便利な機能の集まりです。

補足(UIとは)

ユーザーインターフェイスの略でコンピューターやデバイスとユーザーがやり取りする場所や手段です。これは、ボタン、メニュー、画面上の要素などです。

ex)
スマートフォンの画面がUIの一部で、アプリを開いたり、写真をスワイプしたり、ボタンをタップしたりすることがこれに該当します。同様に、ウェブサイトを開いた際のメニューやボタンもUIです。

補足(UXとは)

ユーザーエクスペリエンスの略で、ユーザーが得られるサービスでの体験のことです。

ex)
ECサイトの例ですと、利用した時に「レイアウトがきれいで情報がわかりやすい！」「ボタンのサイズや位置が良くて使いやすい！」と思うなど、どのような体験をして、どのような印象を持ったかを指します。

引用　https://qiita.com/hiroki-yama-1118/items/b3388c5dcb155e2e367d

Next.jsとは

Reactのフレームワークです。サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）が特徴です。

補足(SSRとSSGの違い)

両者はWebアプリのパフォーマンスとUXを上げるためのものです。

SSR(サーバーサイドレンダリング)

イメージとして、書籍を印刷して本棚に並べておくイメージです。誰かが本を欲しいと言ったときに、即座に本が手に入るようになっています。

ウェブサイトのページを事前に作っておいて、ユーザーが来たらそのまま提供する方法です。これのおかげでユーザーがウェブページを開くときに、サーバーが毎回コンテンツを作る必要がなくなり、あらかじめ作られたHTMLファイルをすぐに提供でき、
ページの読み込みが速く、UXが向上します。

SSG(Static Site Generator「静的生成」)

イメージとして、レストランでオムライスを注文したら、出来上がったオムライスを提供してくれるイメージです。

ユーザーがウェブサイトにアクセスすると、サーバー（ウェブサイトのバックエンド）がその瞬間にページの内容を生成して、ユーザーのブラウザに送ります。
これにより、すぐに見たいページが表示されます。
動的なコンテンツが含まれる場合、サーバーサイドでコンテンツが生成され、ユーザーに提供されます。

ChatGPTも参照しました。

SSG	SSR
ブログ、Qiitaやドキュメントなど	ユーザーの更新画面
ECサイトなどの商品ページ	SNSのタイムライン

⚫︎SSGは情報などを更新せず1回情報を取得できればOKです。
つまりビルド後に変更する必要がないページに使われます。

⚫︎SSRはユーザーの情報などを更新したります。
つまりユーザーのリクエストによって表示内容が変わるページで使われます。

ReactとNext.jsの具体的な違いは？

特徴

• React
  JavaScriptのライブラリ
UIを構築するために使用
ルーティングやサーバーサイドレンダリングなどの追加の機能がない

• Next.js
  Reactのフレームワーク
Reactをベースにしたアプリケーションをより簡単に開発できるようにするためのツールと機能を提供
サーバーサイドレンダリングやルーティングなど、機能を補完する役割がある

ルーティング

• React
  ルーティングに対して明示的なサポートなし
独自にルーティング機能を導入するか、ルーティングライブラリを使用

• Next.js
  Next.jsはファイルベースのルーティング
ページの作成や管理が簡単
ページがpagesディレクトリ内のファイルにマッピングされ、自動的にルーティング

サーバーサイドレンダリング（SSR）と静的サイト生成（SSG)

• React
  クライアントサイドでのみ動作するので、SSRやSSGは使えない
• Next.js
  SSRやSSGは使える
パフォーマンスの向上やSEOの最適化ができる

APIルート

• React
  APIの作成や管理に対する直接のサポートがない

• Next.js
  APIルートを作成
サーバーサイドロジックやデータの処理を組み込める

他にもReactは優秀なとこはある

• SPA化
  ブラウザによるページ遷移を行わずにコンテンツの切り替えができる。
• CSR
  ウェブページを開くときに、ほとんどのコードがユーザーのブラウザで実行され、ページの表示や操作が行われる仕組み。
• 仮想DOMの高速化
  仮想DOMはブラウザへの負荷を減らし、効率的にUIの更新を行う仕組み

その他Next.jsの特徴

他にもISRがありますが、以下の参考記事がわかりやすいので、
技術選定などでご活用ください。

フロントエンドを最初にやるならReactがいい

これは僕の意見ではなくて、自分よりもはるかに実力のあるフロントエンジニアの方がお話をされていましたが、
ReactはVueやAngularに比べて独特な構文も無くて、JavaScriptの基礎も身に付きやすいみたいです。

●補足
自分はVueやAngularはやっていないです。

参考資料

ChatGPT参照