この記事を書いた理由

転職を機にReact単体は使ったことがあったが、Next.jsはほぼ未経験であり、具体的に何ができるのか理解していなかった。そのため、Next.jsのメリットや導入の目的を整理するためにこの記事を書いた。

Next.jsとは

Next.jsはReactをベースにしたフレームワークである。フレームワークとは、Reactだけでは補えない課題や欠点を解決するために作られたものである。

例えば、JavaScript単体ではAjaxの記述が複雑でスムーズな開発が難しいため、それを解決するためにReactが誕生した。同様に、Reactにも課題があり、それを補うためにNext.jsが開発された。その主な課題は、大規模なプロジェクトになるほど高速にデータをレンダリングすることが難しくなる点である。

Next.jsはなぜ誕生したのか？

Reactはページ数が少ない小規模なWebサイトに向いている。しかし、大規模なWebサイトではクライアントサイドレンダリング(CSR)による読み込み速度の低下が課題となる。この課題を解決するためにNext.jsが誕生した。

ReactとNext.jsの違い

レンダリング手法

Reactはクライアント側でレンダリングを行う。CSR(SPA)
Next.jsはサーバー側でレンダリングを行う。
そのため、Reactだとクライアント側のPCのスペックによって、表示される速度が変わってしまう。HTMLの解析や表示などクライアントのPCに依存してしまう。しかし、SSG,SSR,ISRの場合、サーバーのスペックが高ければ、そこでHTMLを生成する。つまりサーバー側でHTMLのDOMのツリー構造を構築している。各々のPCに依存せずにHTMLを生成するのが強み。

プリレンダリングとは (Next.jsの概念)

初回読み込み時に既にHTMLが生成されて表示されている状態。その後にJavaScriptなどを読み込む。
一方でReactの場合、初回読み込み時は白紙の画面でそこからHTMLを生成し、Javascriptを読み込んでいる。
そのため、違いとしては初回読み込み時にHTMLで画面が表示されているかいないかの違い。
プリレンダリングのプリとは”前”という意味なので、レンダリング前にという意味合いを持つ。

プリレンダリングの種類

1. SSG

サーバー側で既にビルドしておく。そのため、リクエストが来ても既にビルドされ生成されているHTMLが返却されるので高速。更新のほとんどないページに利用される。例えば、ブログのテキストや、ECの商品画像など。

2. SSR

リクエストが来るたびに毎回、HTMLを生成する。SSGよりは遅くなる。更新の多いページに利用される。例えば、Xのプロフィール部分やタイムラインの部分等。
SSGは既にビルドされているので、新しくデータを付け加えることができないが、非常に高速でレンダリングするのがメリット。

なぜSEOに強いと言われるのか？

高速なページの表示
SSGでは事前にHTMLを生成し、SSRでは性能の良いサーバーでリアルタイムにHTMLを生成するため、クライアントに素早くHTMLを提供できる。この高速性が検索エンジンに評価される。
完全なHTMLが表示されるから
SPAでは初回表示時に空のHTMLが表示され、JavaScriptでデータを取得してから画面を描画する。一方、Next.jsでは初回から完全なHTMLを提供するため、クローラーにとっても理解しやすく、SEOに有利である。

ディレクトリ構造

pages/

Next.jsのページを構成するディレクトリである。ファイル名がそのままURLの一部となる。

public/

静的な画像やファイルを保管するディレクトリである。たとえば、src="/vercel.svg"と記述することで、publicディレクトリ直下のファイルを指定できる。

components/

Head情報やheader情報など、アプリ全体で共通して使用するコンポーネントを格納する。

結論 Next.jsを使う意味

Next.jsを使用することで、大規模なプロジェクトでも高速にデータをレンダリングできる。SSGやSSRを活用することでクライアントPCの性能に依存せず、高速なページ表示を実現する。その結果、SEOに強くなり、ユーザー体験も向上する。

また開発者側でも以下のようなメリットがある。
・直感的にルーティング設計ができる
・ホットリロードが標準

逆に、SSRやSSGを使わない場合には学習コストがかかるため、Next.jsを使用する必要がないケースもあり得るんじゃないかと思っていたが、React公式ドキュメントではNext.jsの利用が推奨されている。
今後、Next.jsを活用しない理由はほとんどないのかも。