Next.js vs React：Nextが加えるものと必要になる場面
Next.js vs React
Next.js vs React：ライブラリとフレームワーク、Viteで十分な場合 | We.Inc
ReactはUIライブラリで、Next.jsはその上に作られたフレームワークです。プロジェクトに必要な機能にチェックを入れると、Next.jsとVite構成の素のReactのどちらが合うかが、両方のコード付きでわかります。
Reactは、コンポーネントからユーザーインターフェースを構築するためのライブラリです。Next.jsはReactを使うフレームワークで、ファイルベースのルーティング、サーバーレンダリング、サーバーコンポーネント、APIエンドポイント、ビルドツールを追加します。どちらでも書くのはReactです。ページにサーバーレンダリングされたHTML、シークレット、バックエンドのルートが必要ならNext.jsを選びましょう。ログインの後ろにあるアプリにはViteを使った素のReactが向いています。
最初から使えるもの
- 必要なもの
- React + Vite
- Next.js（App Router）
- コンポーネント、状態、フック
- あり
- あり、同じReact
- ルーティング
- ルーターライブラリを追加
- app/内のフォルダーがルートになる
- JavaScript読み込み前に描画されるHTML
- なし、SSRやプリレンダリングを追加しない限り
- あり、サーバーまたはビルド時
- サーバーコンポーネントとサーバー上のシークレット
- なし
- あり、レイアウトとページはデフォルトでサーバーコンポーネント
- 同じプロジェクト内のAPIエンドポイント
- なし、別のバックエンドが必要
- route.tsファイル
- 出力
- vite buildによる静的ファイル
- Nodeサーバー、またはoutput: 'export'で静的ファイル
プロジェクトに必要な機能にチェックを入れてください。それぞれの機能がNext.jsに組み込まれているか、ViteのReactアプリで簡単に実現できるかが表示され、集計結果から最初のおすすめがわかります。下のコードは、同じ小さなページを両方の方法で書いたものです。
- いつか必要になるものではなく、今プロジェクトに必要な機能すべてにチェックを入れます。
- 各機能がどちら寄りか、そしてその理由を確認します。
- リストの下にある集計とおすすめを読みます。
- 2つのコード例を比較して、どれだけ変わるかを確認します。
- Reactの知識はそのまま活かせます。コンポーネント、フック、JSXは同じで、変わるのはファイルの置き場所とコードの実行場所です。
- Next.jsでは、状態、エフェクト、ブラウザーAPIが必要なファイルにだけ'use client'を付けましょう。レイアウト全体をクライアントにすると、送信するJavaScriptがはるかに多くなります。
- Viteアプリは静的ファイルなので、どの静的ホスティングにも置けます。サーバー機能を使うNext.jsアプリには、Nodeを実行できるホスト、または選んだプラットフォームのアダプターが必要です。
- 検索流入が重要なら、JavaScript実行前にページが何を送っているかを確認しましょう。Viteのシングルページアプリでソースを表示すると、ほとんど空のルートdivしか見えません。
よくある質問
Next.jsはReactより優れていますか？
Next.jsはReactを実行するので、通常の意味での二者択一ではありません。本当の問いは、フレームワークのルーティング、サーバーレンダリング、規約が欲しいのか、それとも各部品を自分で選ぶ軽い構成が良いのか、です。
ReactチームはまだCreate React Appを推奨していますか？
現在のreact.devのガイドは、Next.jsやReact Routerなどのフレームワークから始めることを推奨し、独自の構成をゼロから作る場合の選択肢としてVite、Parcel、Rsbuildを挙げています。Create React Appは記載されていません。
Next.jsでViteのような静的サイトを作れますか？
はい。next.config.jsでoutput: 'export'を設定すると、next buildがHTML、CSS、JavaScriptをoutフォルダーに書き出します。cookie、rewrite、redirect、サーバーアクションなど、稼働中のサーバーが必要な機能はこのモードでは使えません。
Next.jsの前にReactを学ぶべきですか？
まずReactの基本を学びましょう：コンポーネント、props、状態、エフェクト。Next.jsはその上にルーティングとサーバーの概念を追加します。どの問題がどの層に属するかを見分けられると、デバッグがずっと楽になります。
ViteのReactアプリはSEOに不利ですか？
必ずしもそうではありませんが、デフォルトではJavaScriptが実行されるまでHTMLにページの内容がありません。検索上位を狙うマーケティングページはサーバーレンダリングやプリレンダリングのほうが簡単です。ログインの後ろにあるダッシュボードには不要です。
ライブラリとフレームワークの違い
- Reactは、コンポーネントが状態をどのようにUIに変換し、ページを更新するかを決めます。URLがどの画面に対応するか、データをどこで読み込むか、プロジェクトをどうビルドするかは決めません。それらはViteアプリではあなたが、NextアプリではNext.jsが決めます。
- これがトレードオフです。Next.jsは決めることを減らしてサーバー機能を追加し、その代わりにあなたはフォルダーの規約に従い、そのビルドを実行します。
コードで何が変わるか
- Next.jsでは、app/blog/page.tsxが/blogルートになり、layout.tsxがその子を囲みます。ページは特に指定しない限りサーバーコンポーネントなので、データを直接awaitでき、インタラクティブな部分は'use client'で始まるファイルに置きます。
- Viteアプリでは、main.tsxが1つのルートコンポーネントをindex.htmlに描画し、ルートはReact Routerなどのライブラリから提供され、データはfetchやクライアントキャッシュを通じてブラウザーで読み込まれます。
Viteを使った素のReactで十分な場合
- 社内ツール、ダッシュボード、エディター、ログインが必要なものは、サーバーレンダリングされたHTMLをほとんど必要としません。Viteアプリはすぐに起動し、静的ファイルとしてデプロイでき、考えるべきことも少なく済みます。
- そのようなアプリに後から公開ページが必要になった場合、マーケティングページを別サイトに置き、アプリ自体はそのままにするのが一般的です。
同じページを両方の方法で
Next.js：サーバーでデータを読み込むルート
ファイルパスがURLになります。ページはHTML送信前にデータをawaitし、クライアントJavaScriptとして送られるのはボタンだけです。
React + Vite：同じリストをブラウザーで読み込む
ルーティングはReact Routerが担い、リストはブラウザーが取得した後に表示されます。
どちらかのプロジェクトを始める
どちらのコマンドも、TypeScriptを使うかどうかなど、いくつか質問をします。
検索で上位表示が必要な公開ページ
サーバーまたはビルド時のHTMLにより、最初のレスポンスにコンテンツが含まれます。
描画時に使うデータベースクエリやAPIキー
サーバーコンポーネントなら、認証情報がブラウザーのバンドルに含まれません。
同じプロジェクト内のバックエンドエンドポイント
route.tsファイルがAPIエンドポイントになります。
共通レイアウトを持つ多数のコンテンツページ
フォルダールーティングとネストしたレイアウトが組み込まれています。
すべてがログインの後ろにある
クローラーが見ることはないので、ブラウザーでの描画で問題ありません。
ホスティングは静的ファイルのみ
vite buildは静的アセットを出力します。Next.jsも可能ですが、サーバー機能が使えなくなります。
他サイトに埋め込むウィジェットやツール
1つのバンドルと1つのルート要素のほうが簡単に組み込めます。
React自体を学ぶ
一度に覚える概念が少なく、サーバーとクライアントの区別を考える必要がありません。
どちらがプロジェクトに合う？
プロジェクトの要件
React + Vite
Next.js：{n}。React + Vite：{v}。
おすすめを表示するには、要件を1つ以上チェックしてください。
Next.js寄りです。要件がサーバーレンダリングやサーバーコードに依存しています。
Viteを使った素のReactで対応できます。公開ページが必要になったら、後からフレームワークを追加できます。
僅差です。検索上位を狙う公開ページが1つでもあればNext.js、そうでなければViteから始めましょう。
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る