Next.jsとReactの使い分けは、画面を誰が見るかで決まる｜自作の管理画面と宿のサイトで比べた

こんにちは！アントロンのNaokoです。

Next.jsとReact、どちらを使えばいいのか迷っていませんか？

結論からお伝えすると、この2つは並べて比べるものではありません。ReactはUI（画面の部品）を作るライブラリで、Next.jsはそのReactを使ったフレームワークです。実際に選んでいるのは「Next.jsを使うか、Reactだけで組むか」で、決め手は「その画面に検索から人が来るかどうか」でした。

この記事では、私がReactだけで組んだ管理画面と、制作を担当している宿のサイトを例に説明します。

※内容は2026年9月時点の情報です。

ReactとNext.jsの関係

Next.jsの公式ドキュメントは、Next.jsを「React framework for building full-stack web applications」と説明しています（Next.js Docs）。画面の部品はReactで作り、それ以外の機能や最適化をNext.jsが受け持つ、という関係です。

React公式のCreating a React Appでは、新しくアプリやサイトを作るなら、フレームワークから始めることを勧めています。フレームワークを使わない場合の選択肢として、Viteなどが挙げられています。

私がReactだけで組んだ管理画面

2026年9月に、宿のサイトのSEOの状態を一覧にして直すためのツールを作りました。画面はVite＋React、APIはHonoです。使うのは私だけで、いまは自分のパソコンの中だけで動かしています。

2026年9月28日に、自分のパソコンで管理画面を開いた画面です。ページごとのステータス・検索での表示回数・アクセス・構造化データが並びます（宿の名前と、各ページのtitle・descriptionはぼかしています）。

この画面の元になるHTMLは、次のとおりです。

<body>
  <div id="root"></div>
  <script type="module" src="/src/client/main.tsx"></script>
</body>

<body> の中には、空の箱が1つとJavaScriptの読み込みしかありません。表やボタンは、ブラウザがJavaScriptを実行して初めてできます。検索に出す必要のない画面なので、これで困ることはありません。

宿のサイトは、最初のHTMLに中身が入っていた

このツールを作り始めた9月15日、宿のサイトのサイトマップから16ページのURLを集め、全ページのタイトルと説明文をプログラムで取りました。JavaScriptを実行しない単純な取得で、16ページとも取れました。

取れたのは、宿のサイト（STUDIOで制作）が、中身の入ったHTMLを返していたからです。8月に確かめたときも、JavaScriptなしの取得で、よくある質問・料金・アクセスの文章が全部取れていました。

もし宿のサイトが、さきほどの管理画面のように中身が空のHTMLを返す作りだったら、同じ方法では何も取れなかったはずです。

サーバー側で中身の入ったHTMLを作って返す仕組みを、SSR（サーバーサイドレンダリング）と呼びます。Next.jsは、このSSRをReactの画面で使えるようにするフレームワークの1つです。

検索エンジンはJavaScriptを実行しないのか

以前この記事では「検索エンジンのクローラーが見ているのは最初のHTMLだ」と書いていましたが、これは言い過ぎでした。

Google検索セントラルのJavaScript SEO の基本を理解するによると、Googleはページをクロールしたあと、JavaScriptを実行して表示（レンダリング）し、その結果をインデックスに登録します。

一方で同じページには、サーバー側でのレンダリング（プリレンダリング）も検討するように書かれています。理由として、表示が速くなることと、JavaScriptを実行できないbotもあることが挙げられています。私がタイトルと説明文を集めたような単純なプログラムも、JavaScriptは実行しません。

誰がその画面を見るかで決める

ここまでをまとめると、判断は次のようになります。

• 検索から人が来る画面：ブログ、LP、お店や会社のサイトなど。最初のHTMLに中身が入る作りにしておくと安心。Next.jsはその選択肢の1つ
• ログインして使う画面：管理画面、ダッシュボード、自分だけが使うツールなど。検索に出す必要がないので、Reactだけ（Viteなど）で組んでも困らない

作るものの種類ではなく、その画面を誰が見るか。私はそこで決めています。

自分のサイトで確かめてみる

いま運営しているサイトがあれば、ブラウザでページを開き、右クリックから「ページのソースを表示」（Google Chromeの場合）を選んでみてください。本文の文章がそのまま並んでいれば、最初のHTMLに中身が入っています。

最後まで読んでくださりありがとうございました！