React — 02 Next.jsとは何か

ReactとNext.jsは同じものではない。ReactがUIの部品と更新の原理を提供するのに対し、Next.jsはその部品で複数のURLを持つWebアプリケーションを作り、実行するための共通の決定をまとめて提供する。

§ 00 · Reactはライブラリ、Next.jsはフレームワーク

ライブラリは特定の問題を解く道具を提供し、アプリケーションの残りの構造は開発者の選択に委ねる。Reactが中心に扱う問題は、コンポーネントでUIを表現し、データの変化に合わせて更新することだ。

フレームワークはアプリケーション全体を構成する規則と実行環境を提供する。Next.jsはReactをレンダラーとして使いながら、ファイルベースのルーティング、レイアウト、サーバーとクライアントの実行境界、データ処理、ビルドとデプロイの基本構造をまとめる。Reactの代替品ではなく、Reactを含めて組織する上位の層だ。

§ 01 · Reactだけでは残る決定

ReactだけでもブラウザのUIは作れる。しかし、複数ページのURLをどう定義するか、初期画面をサーバーとブラウザのどちらで作るか、どこからデータを読むか、コードをどう分割して送るか、検索エンジンや共有カードにどのHTMLを渡すかについて、ReactのコアAPIは一つの答えを定めていない。

開発者はルーターとビルドツールを自分で組み合わせてもよいし、これらの決定をまとめたフレームワークを選んでもよい。Next.jsは後者だ。そのため、Reactを学ぶこととNext.jsを学ぶことは重なるが同一ではない。JSXとStateはReactの言語であり、page・layout・routeなどの規則はNext.jsの言語だ。

§ 02 · Next.jsが加えるもの

ルーティングはフォルダと特別なファイルをURLや画面に結び付ける。レイアウトは複数ページが共有する枠を定義する。レンダリングではページを事前に作るか、リクエスト時にサーバーで作り、必要な操作への反応をブラウザに引き継がせる。

ほかにも、サーバーでのデータアクセス、ローディング・エラー・404のUI、画像とフォントの最適化、コード分割、メタデータ、サーバーエンドポイントなどを一つの体系に収める。全機能を使う必要はない。衝突し得る道具の選択を、フレームワークが一つの規則に整理する点が重要だ。

§ 03 · サーバーとクライアントを一つのコンポーネントツリーとして見る

Next.jsのApp Routerでは、ページとレイアウトは既定でサーバー上で実行されるコンポーネントだ。サーバーコンポーネントはデータ源の近くで読み取り、秘密情報をブラウザに送らず、送信するJavaScriptを減らすのに適している。

State、イベントハンドラ、useEffect、ブラウザAPIが必要な部分はクライアントコンポーネントが担う。“use client”は、そのファイルをブラウザ側のモジュールグラフの境界として示す。サーバーコンポーネントとクライアントコンポーネントは競合するのではなく、静的な仕事と対話的な仕事を一つのツリーで分担する。

§ 04 · 有力な組み合わせだが唯一ではない

複数URL、サーバーデータ、検索への表示、共有メタデータ、静的生成、サーバーレンダリングが必要なサイトなら、ReactとNext.jsの組み合わせは多くの決定を一度に解決する。Reactのコンポーネントモデルを保ちながら、アプリケーション全体の道筋を得られるのが利点だ。

一方、小さなウィジェット、学習用の画面、ブラウザ内だけで動く単純な道具なら、Reactだけを使うか、別のビルドツールやフレームワークを選べる。Next.jsを使えば自動的によいアプリになるわけでもない。フレームワークは決定をなくすのではなく、繰り返す決定を既定値と規則で減らす。

記事を読む: sass.studio.