私は新卒の駆け出しエンジニアです。7月から案件に配属されて、Reactを業務で書くようになりました。毎日勉強をしながら、Reactを楽しんでいます。

そんな中、いつもお世話になっている先輩社員から、「Reactがより使いやすくなった、Next.jsってのもあるよ」と教えてもらいました。

実際に、Reactの公式ドキュメントには

React でアプリ全体を構築する場合は、Next.js や Remix のようなフルスタックのフレームワークをお勧めします。

と紹介されていました。

そこで、今回はReactからNext.jsに移行するのがなぜおすすめなのかをReactと比較しながら、Next.jsでは何ができるようになり、優れているのかをまとめていこうと思います。

Next.jsとReactとは

Next.js

Next.jsはReactのフレームワークで、高性能なウェブアプリケーションを構築するための基本構造を提供しており、サーバー機能を備えているため、サーバーレスでWebページを表示することができます。

React

ReactはWebアプリのユーザーインターフェース（UI）構築に特化したJavaScriptライブラリで、コンポネントからユーザーインターフェースを作成できます。

Next.jsの誕生背景

モバイルデバイスの普及により、Webサイトの閲覧環境が変化したことで、Webサイトの表示速度やSEOの重要性が高まってきました。今まではクライアントサイドレンダリングで、ブラウザでHTMLを生成するため、表示速度が遅くなるデメリットがありました。そこで、サーバーサイドレンダリングはこれらの課題を解決する有効な技術として注目を集め、Next.jsが誕生しました。

Next.jsで追加された機能

サーバーサイドレンダリング（SSR）
静的サイトジェネレーション（SSG）
画像の最適化
ルーティング機能　など

CSRとは

クライアントサイドレンダリングの略です。
リクエストが来たら、レスポンスを受け取って、ブラウザ側でレンダリングを行います。

CSRの特長

動的コンテンツに対応：ユーザーの入力に応じて、コンテンツを動的に生成できる。
リアルタイムなユーザー体験：即座にコンテンツを更新できる。
初回表示は遅い：ブラウザ上でHTMLを生成するため。

SSRとは

サーバーサイドレンダリングの略です。
リクエストが来たら、サーバー側でレンダリングを行い、レスポンスを送信します。

SSRの特長

初回表示は早い：サーバー側でHTMLを生成するため。
動的コンテンツに対応する：ユーザーの入力に応じて、コンテンツを動的に生成できる。
SEO対策には不利：HTMLに必要な情報を埋め込むのが難しい。

SSGとは

静的サイトジェネレーターの略です。
事前にHTMLを生成しておき、リクエストが来たら、レスポンスを送信します

SSGの特長

初回表示は早い：事前にHTMLを生成しておくため。
SEO対策に有利：HTMLに必要な情報を埋め込むことができるため。
動的コンテンツには対応しない：ユーザーの入力に応じて、コンテンツを動的に生成できない。

わかったこと

Next.jsはReactにはなかった機能が追加されているが、利用目的が異なっているため、使い分けられている。

Next.jsの公式ドキュメントは学びコンテンツがとても充実しているので、こちらでもっと学んでいこうと思いました。

学習を行いながら、記事を作成しました。誤った点がございましたら、指摘していただけると幸いです。
最後まで、読んでいただき、ありがとうございました。