私は新卒の駆け出しエンジニアです。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の公式ドキュメントは学びコンテンツがとても充実しているので、こちらでもっと学んでいこうと思いました。
学習を行いながら、記事を作成しました。誤った点がございましたら、指摘していただけると幸いです。
最後まで、読んでいただき、ありがとうございました。