Next.jsとは？

Next.jsというものを最近使い始めたが、同じような名前のNuxt.jsとは何が違うのか、Reactとは何が違うのか？
細かい違いがわからなかったのでここで整理します。
と言っても、引用元の記事のコピペがメインになりますのでご承知おきを。

引用

Next.jsとReactの違い

Next.jsはReactベースではありますが、Next.jsとReactでは以下のような違いがあります。

	Next.js	React
サーバ機能	○	×
利用用途	アプリケーションフレームワーク	Viewライブラリ
部分導入	×	○

Next.jsとNuxt.jsとの違い

Next.jsと似たような名前のNuxt.js（ナクストジェイエス）というフレームワークがあります。Next.jsもNuxt.jsもSSRを可能にするJavaScriptフレームワークです。サーバサイドでレンダリングが必要な際に導入するのが一般的です。
違いとしては、Reactで構築されたアプリケーションをSSRする場合はNext.jsを使い、Vue.jsアプリケーションをSSRする場合はNuxt.jsを使う、ユースケースによって使い分けてください。

	Next.js	Nuxt.js
ベース	React.js	Vue.js

Node.jsとの関係

Next.jsはそれ単体では動作できません。事前にNode.jsのインストールが必要になります。Next.jsはUIライブラリのReact.jsをNode.jsで使用できるようにするフレームワークです。

Next.jsの特徴とできること

Next.jsの大きな特徴として以下の4つが挙げられます。少し難しいように見えますが、ひとつずつ見てみましょう。

• 画像最適化
• ファイルベースルーティング
• ハイブリッドなレンダリング
• ファストリフレッシュ

画像最適化

Next.jsはimgタグの代わりにImageタグを使うことで、画像を最適化することが可能です。具体的には、画像の次世代フォーマットであるWebPへ自動的に変換するため、高速に画像を表示することができます。そのため従来のjpegやpngよりもはるかに表示速度が速くなるのです。わざわざ画像をWebPに変換する手間も省けますので非常に便利です。

ファイルベースルーティング

URLを決定し、Webページ表示したい場合、通常は特定のフォルダの配下にindex.htmlを置きます。例えばhttp(s)://localhost/map/であれば、サーバのmapフォルダ配下にindex.htmlをアップロードします。
しかし、Next.jsでは「pages」というフォルダが初めから存在しており、pagesフォルダ配下にファイルを置くと自動的にパスが生成され、アクセス可能になります。
具体的には、/pages/map.jsxというファイルを作ることで、http(s)://localhost/mapというURLへアクセスできるようになります。

ハイブリッドなレンダリング（CSR・SSR・SSG）

Reactではクライアントサイドでのレンダリング(CSR：Client Side Rendering)のみに対応していますが、Next.jsはサーバサイドでレンダリング(SSR：Server Side Rendering)が可能です。さらにはページごとにレンダリングの種類を個別に分けることさえできます。

このレンダリングの方法の違いを紹介する際は必ずと言っていいほどSEO（Search Engine Optimization）が話題に上がります。Googleのクローラーが検知しやすいのが、サーバサイドレンダリングだというのは有名です。ただし、Googleのクローラーは近年非常に進化しており、JavaScriptのようなクライアントサイドでレンダリングされたものでも、ほとんど遜色なく検知できるようになったとも言われています。

また、Next.jsでは静的にサイトを生成するプレレンダリングが可能です。一般的にStatic Site Generation の頭文字を取ってSSGと呼ばれています。静的にサイトを構成することの最大のメリットは、最初にページにアクセスする際に瞬時にHTMLを提供するため、レンダリング速度の大幅な軽減が期待できることです。読み込み速度が改善することから、ユーザフレンドリーなレンダリング方法だといえます。

ファストリフレッシュ

ファストリフレッシュとはソースコードに変更があった場合にその箇所のみが再描画されるという機能です。Reactでも同様の機能が利用できますが、ライブラリのインストールが必要になります。Next.jsでは変更した箇所のみがブラウザに反映されるため、効率よく開発を進められます。