Next.jsとはReactベースのフレームワーク！Nuxt.jsとの違いや特徴は？【入門編】

Next.jsとは？

Next.jsとはReactをベースに開発されたJavaScriptフレームワークです。

フレームワーク（framework）は直訳すると「枠組み」「骨組み」という意味で、まさにプロジェクトやプロダクトを構成する骨組みを提供してくれるものです。開発者はパーツなどの“外壁”や“内装”を利用し、“機能”のみに集中して開発することが出来ます。

Next.jsを導入することで、基盤となる仕組みは考えずに、自分の好きなようにアプリケーションを開発したり拡張したりできるため、業務効率化を図れます。

もう少し掘り下げるとNext.jsはReactベースですが、ブラウザ側でのレンダリングを行うSingle Page Aplication（以下、SPA）だけでなく、サーバサイドでのレンダリング（以下、SSR）が可能です。そのため、SEO上のクローリング対策、ページスピードの向上などがメリットとして挙げられます。

Next.js

Next.jsと他のフレームワークの関係

Next.jsがどのような位置づけかを理解しやすくするために、他のフレームワークやライブラリとの関係性や違いについて解説します。Reactとはどう違うのか、Node.jsとどう関係しているのかなど、簡単に見てみましょう。

Reactとの違い

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

• ・サーバ機能の有無
• ・アプリケーションフレームワークかViewのライブラリか
• ・部分導入が可能かどうか

Next.jsはサーバとして動かすことができますが、Reactはその機能を持ち合わせていません。またNext.jsは、アプリケーションフレームワークとしてWebアプリの土台となります。一方Reactは、部分的にDOMの値によって表示を変化させることに特化しているため、Reactでアプリケーションを構築するには別途サーバライブラリを導入する必要があります。

上記の大きな違いを見る限りNext.jsが単なるReactの派生ではないことが分かります。

（関連リンク：Reactとは？フレームワークとの違い・フロントエンド開発に活用するメリットや特徴を解説！）

Nuxt.jsとの違い

Next.jsと似たような名前のNuxt.js（ナクストジェイエス）というフレームワークがあります。Next.jsもNuxt.jsもSSRを可能にするJavaScriptフレームワークです。サーバサイドでレンダリングが必要な際に導入するのが一般的です。

大きな違いとしては、一般的にNext.jsがReactとペアであることに対し、Nuxt.jsはVue.jsと組み合わせて用いられることです。Reactで構築されたアプリケーションをSSRする場合はNext.jsを使い、Vue.jsアプリケーションをSSRする場合はNuxt.jsを使う、と押さえておけば大丈夫でしょう。

jQueryとの違い

よく「Next.jsってjQueryみたいなものでしょ？」と聞かれますが、全然違います。jQueryはJavaScriptのライブラリですが、そもそも利用シーンが全く別物なので、関連性はありません。

jQueryは特定のDOM操作を行うためのライブラリですが、Next.jsはページそのものを作成するアプリケーションフレームワークです。jQueryはReact同様にサーバ機能を有していませんが、Next.jsはサーバ機能を利用することが出来ます。

（関連リンク：jQueryとは終わった技術なのか？代わりに学ぶべきJavaScriptのフレームワークとは？）

Node.jsとの関係

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

Reactはクライアント側でレンダリングを実行しますが、Node.jsはサーバ側でレンダリングします。クライアント側でのみしかレンダリングできないReact.jsを、サーバサイドでレンダリング可能にするものがNext.jsだというイメージを持つと分かりやすいでしょう。

（関連リンク：Node.jsとは？サーバーサイドJavaScriptのメリットやできることを解説！）

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を提供するため、レンダリング速度の大幅な軽減が期待できることです。読み込み速度が改善することから、ユーザフレンドリーなレンダリング方法だといえます。

いずれにしてもレンダリングを個別に設定できるのはNext.jsの大きな特徴のひとつです。

ファストリフレッシュ

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

Next.jsを使用するフロントエンジニア求人

開発しやすいNext.js！多数企業に採用され需要も上々！

Next.jsの大きな特徴をご紹介しました。Next.jsはJavaScriptでサーバサイドの開発ができるフレームワークです。それ以上に、Next.jsが開発者の立場で考えられたフレームワークであると、個人的には感じています。

画像最適化にしても、ファイルベースルーティングにしても、開発者の手間を少しでも省くことを意識して作られたフレームワークだといえるのではないでしょうか。レンダリングに関してもSEOの施策を開発側で行いやすいように設計しているのではないかと考えざるを得ません。

そんな開発者フレンドリーなNext.jsは、世界中の名だたる企業で採用されています。この機会にNext.jsにチャレンジすることを心からおすすめします。