Next.jsは、モダンアプリケーション開発に特化したReactベースのフルスタックフレームワークです。

その人気は非常に高く、2022年のレンダリングフレームワーク人気ランキングでは「Astro」「SvelteKit」に次いで第三位という結果になっています。

この調査は、JavaScriptに関心がある世界のIT技術者39,472人にアンケートを取った結果をまとめたものです。Next.jsが2018年から常に高い数値をキープし続けていることがよく分かります。

人気のJavaScriptライブラリ「React」をベースに作られているNext.jsは、ページのレンダリングをサーバ側で行えることからSEOやパフォーマンスの面で優れており、近年世界中で需要が高まっているのです。

この記事では、人気のフレームワークNext.jsの特徴やできることについて詳しく解説します。フリーランス案件も多いNext.jsを習得し、エンジニアとしてのスキルを高めましょう。

Next.jsとは？

Next.jsは、モダンフロントエンド開発において最も人気の高いオープンソースのWebアプリケーションフレームワークです。

WebフロントエンドライブラリReactをベースに開発されており、サーバーサイドレンダリングや静的Webサイト生成など、Webアプリケーション開発において役立つさまざまな機能を有しています。

IT技術の発展がめざましい昨今、Webアプリケーション開発は複雑化する傾向にありますが、Next.jsを導入することで、開発をより効率的に進められるようになります。さらにNext.jsの導入によって、優れたユーザーエクスペリエンス（UX）を提供できるようになるとあって、近年では特に人気を集めているのです。

Reactとの違い

Next.jsのベースとなっているReactは、Meta社（旧Facebook社）が2013年に公開したJavaScriptのUIライブラリです。現在世界で最も人気のあるフロントエンドライブラリでもあります。

近年のWebアプリケーション開発は、フロントエンドのコード記述量が膨大になる傾向があり、可読性やメンテナンス性が悪くなりがちです。このような問題を回避できるのがReactであり、コンポーネント設計や状態管理といった効率的に開発を進める仕組みが備わっています。

そしてNext.jsは、Reactの機能性を活かしつつ、Reactではカバーできない領域を補っているWebアプリケーションフレームワークです。Webアプリケーション開発に便利なさまざまな機能を実装しており、React単体より効率的に開発が進められるうえ、従来のフロントエンドエンジニアを悩ませてきた複雑な開発環境を簡便化できます。

Next.jsでできること

Webアプリケーション開発にNext.jsを導入することにより、多様な機能を使えるようになります。代表的なものをいくつかご紹介します。

SPA：シングルページアプリケーション

ページ遷移のたびにすべてのHTMLを都度読み込む従来型のアプリケーション実装のことを、マルチページアプリケーション（MPA）と言います。MPAは、ページの読み込みなどにいちいち時間がかかるのが課題でした。

これに対し、シングルページアプリケーション（SPA）は動的にWebページを更新します。Webページ起動時にいったんHTMLをすべて読み込み、それ以降はユーザーインタラクション応じてAjaxで情報の更新を行うといった仕組みです。

SPAはページ遷移をクライアントサイドで実行するため、オーバーヘッドが軽減され高速なUIを実現できるメリットがあります。

Ajaxとは
Ajaxとは、あるWebページを表示した状態のまま、別のページや再読込などを伴わずにWebサーバ側と通信を行い、動的に表示内容を変更する手法。ページ上でプログラムを実行できるプログラミング言語JavaScriptの拡張機能を用いる。

引用元：「IT用語辞典e-Words」

SSR：サーバサイドレンダリング

SPAは多くのメリットがある反面、更新のためサーバとのトラフィックが発生した際には多少時間を要するのが難点です。これを補うための仕組みが、サーバサイドレンダリング（SSR）です。

SSRとは、サーバサイドのJavaScript実行環境で、リクエストに応じてページ生成を行いHTMLを返す仕組みです。

Reactでは、ユーザー環境のブラウザでJavaScriptが実行され、JSON形式でページを構築します。一方Next.jsのSSRでは、これらのレンダリングをすべてサーバ側で実行し、HTMLを生成したものをフロントエンドに返却します。

レンダリングをサーバサイドで実行するので、サイトの表示が高速化できるメリットがあるほか、SPAでは難しいとされていたSEOの向上も見込めます。

SSG：静的サイト生成

サイトの高速化などメリットの多いSSRですが、トラフィックが多いページなどではサーバ負荷が高くなってしまうのが課題でした。この弱点を補うための仕組みが、静的サイト生成（SSG）です。

静的サイト生成とは、実行前に静的ファイルを生成してデプロイする仕組みです。

ビルドのタイミングでHTMLファイルの生成を実行し、ユーザーからのリクエストがあった際には生成済みのHTMLファイルをホスティングします。

事前にレンダリングを完了しているためレスポンスを高速化できますが、SSRと比べると常に最新の情報が取れるとは限らないため、SSGを利用できるのは更新頻度の低いサイトに限られます。

Next.jsの特徴を現役エンジニアが解説

Next.jsはWebフロントエンド開発を効率的に進められる有益なフレームワークです。ここでは、現役エンジニアである筆者が注目する特筆すべき特徴をご紹介します。

Reactのフレームワークである

Next.jsの最大にして最強の特徴は、世界で高い人気を誇るUIライブラリReactをベースとしている点です。Reactには大きく分けて3つの特徴があり、これらはNext.jsにも踏襲されています。

リアクティブプログラミング

Reactの語源である「リアクティブプログラミング」とは、データを受け取ると同時に、関連プログラムが自動的に反映されるプログラミングの仕組みを言います。

従来のプログラミングでは、表示の更新を行う際には、エンジニアが必要に応じて値をチェックして表示内容を変更するなどの操作が必要でした。ReactはMVCモデルにおけるView関連に特化しており、あらかじめ値を設定しておくことで更新を自動化し、インタラクティブなユーザーインターフェース構築を実現しているのです。

仮想DOM

Reactの中で特に画期的とされているのが、仮想DOMの採用です。

DOMは「ドキュメントオブジェクトモデル(Document Object Model）」の略で、HTML1つ1つのタグをJavaScriptオブジェクトとしてツリー構造で表現する仕組みを言います。

仮想DOMは、ブラウザの持つDOMのAPIを操作するのでなく、プログラム的に構築した仮のDOMを操作することでパフォーマンスを高速化します。

ブラウザ実装に依存することなくDOMを組み立てられるため、後のサーバサイドにおけるレンダリングに大きな影響を与えています。

コンポーネント指向

コンポーネント指向は、モダンフロントエンド開発における基本となる考え方です。機能ごとに細分化されたコンポーネントと呼ばれる部品を用いて開発を行います。

再利用可能な部品であるコンポーネントを複数組み合わせることによって、多様なUIを実現でき、さらにコードの可読性が上がる、テストが容易になるなどのメリットがあります。

ファイルシステムルーティング機能がある

Next.jsをインストールすると、指定プロジェクト内にpagesディレクトリが自動生成されます。このpageディレクトリ以下にjsファイルを配置することで、開発者が特に指定することなく使用できるようになります。このような仕組みがファイルシステムルーティングです。

たとえばローカル環境でpagesの下にsample.jsというファイルを配置した場合、http://localhost:3000/sampleというパスで該当ファイルにアクセスできます。

Next.jsのルーティングは、HTMLを表示する静的ルーティングだけでなく、パラメータによって変化する動的ルーティング、Linkコンポーネントによるページ間リンクなどもサポートしています。

画像パフォーマンスを最適化できる

近年のWebコンテンツは画像が占める割合が非常に高くなっているため、画像パフォーマンスの向上はUXの観点からも非常に重要です。そこでNext.jsには、ビルトインで画像パフォーマンスを最適化できる機能が備わっています。

画像パフォーマンスを最適化するためには、next/imageのImageコンポーネントを使用します。ImageコンポーネントはHTMLタグを拡張した機能を有しており、画像の読み込み時にサーバーサイドで画像の最適化処理を行います。

ページごとにレンダリング手法を切り替えられる

Next.jsは、ページごとにレンダリング手法を切り替えられる特徴を持っています。
切り替えられるレンダリング手法は4つあります。

• サーバサイドレンダリング（SSR）
• 静的サイト生成（SSG）
• クライアントサイドレンダリング（CSR）
• インクリメンタル静的再生成（ISR）

ファイル内部でコンポーネントの他に実装している関数やその戻り値によって、自動でレンダリング手法が切り替わります。どのページがどの手法に設定されているかは、ビルド時の結果画面で確認できます。

ビルド結果で、(Server)と書かれているのがSSR、(Static)(SSG)と書かれているのがSSG、(ISR)はISRとしてビルドされたことを示しています。CSRは他のすべてのタイプと併用ができる性質を持っているため、ビルド結果としては表示されません。

TypeScriptサポート

Next.jsはデフォルトでTypeScriptをサポートしており、create-next-appコマンドを使用することでTypeScriptプロジェクトを作成できます。

TypeScriptはモダンなWebフロントエンド開発において主流となっているプログラミング言語です。JavaScriptに型定義などを拡張した上位互換言語であり、大規模開発に適した高いモジュール性を有しています。JavaScriptの知識さえあれば学習コストが低いうえ、JavaScriptと互換性があるため既存プロジェクトから徐々に移行することも可能です。

その有用性は世界で評価されており、GoogleやMicrosoftはTypeScriptを標準言語として位置づけています。複雑化するフロントエンド開発において、TypeScript×Next.jsによるアプリケーションは今後フロントエンドの中心的存在となっていくことでしょう。

Next.jsのフリーランス案件はある？

最後に、Next.jsのフリーランス案件について見ておきましょう。フロントエンド開発としてNext.jsを採用する企業は多く、さまざまな案件の獲得が見込めます。

案件の供給数

大手フリーエンジニア向け案件サイトでは、Next.jsの案件数は290件という結果でした。

世界的な人気の高まりを受け、今後さらに案件数は増えていくことが予想されます。

単価感

Next.js案件の単価相場は、平日毎日働いた場合の月額で75万円前後となっています。

この金額はあくまで目安であり、他のプログラミング言語などで高いスキルを持って居たり、プロジェクトマネジメントなどの経験を持っている場合にはさらに高い単価が見込めます。

リモート案件の有無

Next.jsはフロントエンド開発のため、ほぼすべての案件でリモートワークに対応しています。

リモート案件で業務を進められれば、居住地域を都市部に限定する必要がなく自由に選べる、自分の時間を確保しながら仕事ができる、人間関係のわずらわしさから解放されるなど、さまざまなメリットがあります。

【まとめ】

Webアプリケーション開発の需要が高まる昨今、Next.jsはフロントエンド開発の中心的存在として、今後さらに存在感を増していくことが予想されます。フリーランスエンジニアとしてキャリアを高めたいと考えるなら、将来性の高いNext.jsのスキルを習得し、幅広い案件の獲得を目指しましょう。

Remotersでは、フロントエンド開発に関するさまざまなリモート案件をご用意しています。興味のある方はお気軽にご相談ください。