【超訳】Next.jsとは？Reactとの関係性、メリットとデメリット｜コーディング、Web開発の外注、代行ならコーディングアライブ

そのReactと関係が深いのがNext.js（ネクスト・ジェイエス）です。
というわけで今回はこのNext.jsをご紹介していきます。
前回と同様、エンジニアではない方でもわかりやすいように詳しい仕組みは省きつつ箇条書き形式でご紹介します。
「何ができる？」「使うとどんなメリットがある？」「注意点は？」といった、Next.jsの概要がザックリ把握できるような内容になっています。

◾︎合わせて読みたい

コーディングの外注・代行ならコーディングアライブ

https://coding-alive.jp/blog/p1552

Web制作/デザイン会社のコーディング・システム開発部門は外注活用の時代へ

経済産業省が公開したデータによるとIT人材は2030年に最大で79万人不足すると言われています。今でさえシステム開発専業の企業はもとよりWeb制作会社やデザイン会社などでも、エンジニアやコーダーを含むIT人材を採用しづらくなっているのを肌で感じているはずです。社内にIT人材が不足することによって、サービス開発や業務効率化、保守運用面でもさまざまな弊害が生じることがあるでしょう。そこで今回の記事は、特にWeb制作会社やデザイン会社にフォーカスし「IT人材不足にどう向き合っていくか」について解説していきます。この記...

Next.jsとは？Reactとの関係性

Next.jsはReactのフレームワーク

[補足]フレームワークとは、枠組みのこと。枠組みを使えば１から作るよりも簡単に素早く開発をすることができます。つまり、Next.jsはReact開発をスムーズにするためのツールということになります。

Next.jsはVercel社が開発

[補足]Reactはfacebook社（現Meta社）が開発。

Next.jsはReactの「ちょっと足りない…」を補える

[補足]ReactはSEO対策が施しにくいなど状況によっては都合の悪い特徴を持っています。Next.jsにはそういったデメリットを簡単に補えるツールが用意されています。

Next.jsのメリット

ページのURLを自由に決められる

[補足]基本的にReactはページ遷移時にURLが変わらず、これがSEOに不利に働くシーンがあります。Next.jsでは通常のWebサイトのようにページごとのURLを簡単に割り振ることができます。
※Webサイト自体のドメインを自由に変えられるという意味ではありません

学習コストが低い

[補足]Next.jsはReactよりもデフォルトで多くの機能が設定されています。これにより環境のセットアップや土台作りに要する知識が必要が無く学習が容易です。

SSR（サーバサイドレンダリング）という機能がある

[補足]ReactではページデータがJavaScript形式のままユーザに配布され、ユーザ側で演算＆描写（レンダリング）されるのに対し、Next.jsはサーバ側でページをレンダリングしてからユーザに配布します。

SSRによりページ表示が早い

[補足]すでにレンダリングされたデータを届けるので、ユーザ側でレンダリング処理をする時間がかかりません。

SSRによりReactよりSEOが有利（かも？）

[補足]Reactのようにレンダリング前のJavaScript形式のページデータを配布する場合、Googleの検索ロボットが読み取れない（＝SEOに不利）という声があります。
Next.jsはHTMLデータを配布するので、検索ロボットが理解しやすいです。
ですが、すでにGoogleの検索ロボットはJavaScriptを読めるから問題無いという指摘もあり、一概には言えません。

画像表示を高速化できる

[補足]Next.jsでは画像を実際の表示サイズに合わせてデータそのものをトリミングして配布してくれます。そのためユーザは必要最低限のデータしかダウンロードする必要がなく、動作が高速になります。

SG（スタティックジェネレーション）で更に早い

[補足]SGとはサーバ側で事前にページを生成してキャッシュしておく仕組み。
PHPなどで作られた通常のWebサイトでは、「①アクセス→②ページの生成→③配布→④表示」という流れになります。
これに対し、Next.jsのSGを使うと事前に②ページ生成が終わっているので「①アクセス→③配布→④表示」となります。

Next.jsのデメリット＆注意点

Nuxt.js（ナクスト・ジェイエス）とは別物

[補足]Next.jsはReactのフレームワーク。Nuxt.jsはVueのフレームワーク。

使えるサーバに制限がある（重要）

[補足]公開にはNext.jsが動くサーバを利用する必要があります。基本的にはNext.jsの開発元であるVercelサーバを利用することになると考える必要がります。

開発価格が高い

[補足]React同様に比較的新しい技術のため、開発可能なエンジニアが少なく市場価格が高い傾向にあります。

Next.jsを一言でまとめるなら

Reactより開発が簡単で、ページ速度も早くてSEOにも強い！
だけどVercelサーバを利用する必要がある。

Next.jsとReactの選びどころ

Vercelサーバを使えるのであれば、Next.jsを利用するのがオススメです。
Vercel以外のサーバを使いたい場合や、URL変更の必要がないシングルページアプリケーションを作りたい場合はReactを選択肢に入れてみましょう。
また、Reactの方が構造がシンプルなので、すでに構築済みのシステムなどに組み込みたい場合はNext.jsよりも導入がスマートになりそうです。