Next.jsとは？
Next.js は React をベースに開発されたオープンソースの JavaScriptフレームワークです。
Next.js は Webフロントエンドライブラリである React の機能性を保ちつつ、サーバサイドレンダリングや静的な Webサイトの生成といった Webアプリ開発で便利な機能が追加されており、React よりも実用性が向上しました。
ほかにもパフォーマンスや SEO、アプリ開発を効率化する機能が多く組み込まれているため、開発者は機能の実装に時間をとられずコーディングに集中することができます。
公式サイトの導入部分にて、Next.js は React を用いたWebアプリ開発で生じる問題をすべて解決する言語だと紹介されました。
このように Next.js は比較的歴史の浅いフレームワークですが、Reactよりも開発がスムーズに行えてユーザ体験 (UX) の向上にも役立つため、React での Webアプリ開発において最も人気があり、近年、フロントエンド開発の現場でも重宝されています。
Next.js は 2016年 10月にリリースされてから、現在までアップデートが継続されており、その都度機能が拡張されています。
どういうときにNext.jsを使うか
React を使えばサーバ側にリクエストを送らずにページ遷移を行うことができます。Reactアプリはすべてのコンテンツをブラウザでレンダリングするため、ページ遷移が少ない Webサイトの開発には向いていますが。ただ、はじめにコンテンツを表示する際、まとめてダウンロードするため、ページ数が多い Webサイトでは初期ローディングにかかる時間が長くなってしまいます。そして、これは SEO にとって不利にはたらきます。
そこで、React の機能をサーバサイドでレンダリングできるよう拡張するのに Next.js が利用されます。
ページによってクライアントサイドのレンダリングとサーバサイドのレンダリングを使い分けできるため、React で大規模な Webサイトを開発する場合は Next.js が適しているといえます。
ほかのフレームワークとの違い
Reactとの違い
Next.js は React と度々比較されますが、両者の 1番の違いは、サーバ機能の有無です。Next.js にはサーバ機能を有しており、単体で Webアプリを動作させられますが、React にはないため、別でサーバを用意する必要があります。こういった点で React よりも Next.js のほうが学習コストや難易度が低いといえます。
また、React が Viewのライブラリとして利用させるのに対して Next.js はアプリケーションフレームワークとして利用されるという点や部分導入の可否という点でも2つに大きな違いがあることがわかります。
こういった違いから Next.js が単に React から派生したものでないことがわかりますね。
Nuxt.jsとの違い
Next.js と似た名前の Nuxt.js（ナクストジェイエス）というフレームワークがあります。そちらもサーバサイドレンダリングを可能にする JavaScriptフレームワークです。
両者は React で構築されたアプリをレンダリングする場合に Next.js を用いるのに対し、Next.js を使い、Vue.js で構築されたアプリをレンダリングする場合は Nuxt.js を使うという組み合わせの関係にあります。
Next.jsでできること
画像の最適化
Next.js では画像を必要なサイズに最適化してデータを送信できるため、画像の表示速度が上がり、ページの読み込みが速くなります。これは SEO にも効果があります。
ハイブリッドなレンダリング（CSR、SSR、SSG、ISR）
React ではクライアントサイドでレンダリングする「CSR (Client Side Rendering) 」のみに対応していますが、Next.js はサーバサイドでレンダリングする「SSR (Server Side Rendering) 」にも対応しています。サーバサイドでレンダリングし、クライアントサイドでは描画するだけで済むため表示を高速化できます。
そして、サーバサイドであらかじめ HTML を構築しておく「SSG (Static Site Generator) 」という方式もあります。静的サイトを構築しておくことで最初にページにアクセスした際、瞬時に HTML を提供でき、読み込み速度が速くなります。
そして、「ISR (Incremental Static Regeneration) 」という方式もあります。これは、SSG と基本的には一緒ですが、SSG と違い、バックグランドで定期的に HTML を再構築するため、SSG よりも高速で更新頻度の高いページに効果的です。
また、ページごとにレンダリング方式を分けることもできます。
Next.jsのメリット・デメリット
Next.js のメリット
・ 環境構築が簡単
・ アプリの拡張が簡単
・ ページの読み込みが速い
・ SEOに有利
ブラウザでレンダリングを行うと、コンテンツが多いほど初期表示に時間がかかります。
特に、表示能力はクライアントサイドのスペックに依存するため、処理能力の低い端末ではより顕著に表れます。
その点、SSR や SSG、ISR であればもちろんクライアントの処理能力に依存しないですし、読み込みが速く、SEO には有利です。
Next.jsのデメリット
・ Next.jsの記法に依存してしまう
・ Next.jsの開発状況に依存してしまう
