Work guide

職種別お仕事ガイド

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

2022.03.23

Next.jsを理解しよう

Web系エンジニアの方であれば「Next.js(ネクストジェイエス)」の名を耳にしたことがある方も多いのではないでしょうか?Next.jsは比較的新しいJavaScriptフレームワークですが、最近フロントエンド開発の現場で使われることが増えています。

Next.jsはjQueryの親戚?TypeScriptの仲間?Node.jsとどう関係があるの?Nuxt.jsとは違うの?といった些細な疑問をお持ちの方に向けて、できるだけかみ砕いてNext.jsをご紹介します。

アーカイブ動画&イベントレポート公開中

イベントの動画&レポートを公開中!ぜひチェックしてみて!

内容:
第一部 基調講演「技術の先の見通し方」
1:技術を点ではなく線でとらえる
2:何過去を知る~ページからパーツへ コンポーネント駆動開発の必然性
3:今を知る~キャズムの壁を超えている「React」「TypeScript」「Next.js」
4:未来を見通す~Create Application
5:それでも気になる、今注目の技術

第二部 ぶっちゃけパネルトーク
1:技術の話
2:ここだけの話
3:入社前後のよもやま話

Next.jsとは?

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

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

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

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

Next.js

Next.jsを採用している有名企業の事例

  • Next.jsは有名企業でも多く採用されています。著名なサイトの例は以下の通りです。
  • Hatena
  • LEGO
  • Ferrari
  • MERCARI
  • SQUARE ENIX / 海外
  • 利用事例はNext.js公式サイトのShowcaseで確認できますので、是非ご覧になってみてください。
  • Showcase

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

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

Reactとの違い

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

  • ・サーバ機能の有無
  • ・アプリケーションフレームワークかViewのライブラリか
  • ・部分導入が可能かどうか
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のメリットやできることを解説!

TypeScriptとの互換性

  • Next.jsは、JavaScriptの“型宣言版”とも言えるTypeScriptとも互換性があります。
  • TypeScriptとはJavaScriptが変数の型を宣言する必要がない言語であることに対し、あえて型を宣言させることで、より高速に動作させ、エラーを防ぐことを目的としてマイクロソフトが開発したプログラミング言語です。
  • 最近では、Next.jsとTypeScriptを組み合わせた開発プロジェクトも増えています。

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にチャレンジすることを心からおすすめします。

ライタープロフィール


吉村健一さん

フルスタックエンジニア
吉村健一 さん

文系大学を卒業後、新卒としてシステム開発会社に入社。研修やOJTを受け、現在の土台となるスキルを身につける。JAVA、PHPをメイン業務として遂行していたが、激務から体を壊しフロントエンドエンジニアに転身。最も好きなプログラムはJavaScript。フロントエンド、バックエンド共に経験している自称動物大好きフルスタックエンジニア。

QooTechWEB

※この記事の情報は2022年03月23日時点のものです。

  • ポートフォリオをブラッシュアップ!転職で評価されるポイントとは?
  • VRゴーグルなしでも参加できる!バーチャルコミュニケーションを体験しながら、メタバースの基本を知る
  • アバターで参加!メタバースで気軽にキャリア相談
  • 未経験からWeb業界への転職準備

人気の記事

フロントエンドとバックエンドとは?意味の違いとエンジニアの仕事

1

Reactとは?フレームワークとの違い・フロントエンド開発に活用するメリットや特徴を解説!

2

UI/UXとはどういう意味?それぞれの違いと特徴まとめ

3

Webエンジニアの仕事内容と必要なスキルとは?転職活動のポイントやキャリアパスをご紹介

4

コーダーの仕事とは?コーディングに必要なスキルや年収を徹底解説!将来性を高めるためには?

5

フロントエンドとバックエンドとは?意味の違いとエンジニアの仕事

1

Reactとは?フレームワークとの違い・フロントエンド開発に活用するメリットや特徴を解説!

2

UI/UXとはどういう意味?それぞれの違いと特徴まとめ

3

Webエンジニアの仕事内容と必要なスキルとは?転職活動のポイントやキャリアパスをご紹介

4

コーダーの仕事とは?コーディングに必要なスキルや年収を徹底解説!将来性を高めるためには?

5

あなたのライフスタイルに合わせて働きたい方は、WSハケン 1つの会社で長くはたらきたいかたは、WSキャリア

他の職種も見る

  • Webデザイナー・UI/UXデザイナー

  • フロントエンドエンジニア・コーダー

  • Webディレクター・Webプロデューサー

  • Webマーケター

  • システムエンジニア・プログラマ

  • Webオペレーター・Webサイト運営

  • サーバー・ネットワークエンジニア

  • DTP・グラフィックデザイナー

Career advice

転職のアレコレ。プロに相談したい方へオススメ!

最新のIT・Web業界動向を知るキャリアカウンセラーが行う
「キャリアアドバイス」

ある程度経験を積んだので次のステップにキャリアアップしたい、しばらくWeb業界を離れていたが再度業界に戻りたい、 未経験・経験浅めだがどのように転職活動を行っていったらいいかなど、ウェブスタッフでは様々なご要望に対応したキャリアアドバイスを行っております。

お申込みはこちら

ウェブスタッフが運営するサイトでは、利便性向上・分析・広告配信等のためにCookie等のデータを使用しています。当社が取得したアクセスデータとの関連付けの削除(オプトアウト)に関しては「個人情報の取り扱いについて」をご覧ください。

同意して閉じる

確認する

WEB STAFF ウェブスタッフ株式会社

ウェブスタッフは、IT・Web業界専門の求人を取り扱う人材エージェントです。
IT・Webクリエイター・エンジニアの派遣・転職はお任せください。在宅勤務・フリーランスへのキャリアチェンジもサポート。

ページトップへ ページトップへ