Vite vs Next.js：プロジェクトに合うのはどっち？
Vite vs Next.js：ビルドツールかフレームワークか？選び方ガイド | We.Inc
Viteは開発サーバー兼バンドラー、Next.jsはサーバーレンダリングを備えた本格的なReactフレームワークです。必要な条件にチェックを入れるとおすすめが表示され、ポート、出力、ホスティングを並べて比較できます。
Viteはビルドツールです。高速な開発サーバーと、Reactのコードをdistフォルダー内の静的ファイルに変換するバンドラーで構成されています。Next.jsは、ファイルベースのルーティング、サーバーレンダリング、サーバー側のコードを追加するフレームワークです。クライアントだけで動くアプリやウィジェットならVite、ページにサーバーからのHTMLやバックエンド処理が必要ならNext.jsを選びましょう。
要点まとめ
- 何なのか
- 開発サーバーとバンドラー
- 本格的なReactフレームワーク
- ビルドの出力
- dist/内の静的ファイル
- Nodeサーバー用の.next/、または静的エクスポート時のout/
- ルーティング
- 自分で用意する（例えばReact Router）
- app/内のフォルダーとファイル
- サーバー側のコード
- デフォルトではなし
- ルートハンドラー、サーバーコンポーネント、サーバーアクション
この2つはライバルのように比較されがちですが、実際は担当する層が違います。Viteはコードをビルドして配信するだけで、Next.jsはページのルーティング、レンダリング、デプロイの方法まで決めます。下でプロジェクトに必要なものにチェックを入れると理由付きのおすすめが表示されるので、そのあとで詳細な比較を読んでください。
- 条件チェッカーで、自分のプロジェクトに当てはまる項目すべてにチェックを入れます。
- チェックした各項目がViteかNext.jsのどちらかに加算され、結果の下に理由が一覧表示されます。
- 決める前に、参照表でポート、出力フォルダー、ホスティングを比較しましょう。
- 選んだ方のスターターコマンドと設定をコピーします。
- アプリ全体がログインの奥にあるなら、サーバーレンダリングの恩恵はほとんどなく、Viteのシングルページアプリのほうがたいてい楽にホスティングできます。
- 検索で上位表示させたいマーケティングページには、最初のレスポンスに本物のHTMLが必要です。これこそNext.jsが得意とする仕事です。
- output: 'export'を指定したNext.jsもただのファイルを出力しますが、デフォルトのローダーではクッキー、リライト、リダイレクト、サーバーアクション、画像最適化が使えなくなります。
- ViteもSSR APIを使えばサーバーレンダリングができますが、サーバーは自分で書いて動かす必要があります。
よくある質問
Next.jsはViteの上に作られていますか？
いいえ。Next.jsは独自のバンドラー構成を持っています。現在のバージョンではnext devとnext buildでデフォルトでTurbopackを使い、--webpackフラグで切り替えられます。Viteは独自の開発サーバーを使い、本番コードはRolldownでバンドルします。
Next.jsでReact Routerを使えますか？
普通は使いません。Next.jsのルートはapp/内のフォルダー構成から決まり、クライアント側の画面遷移はLinkコンポーネントが担当します。React Routerは、ルートを決める仕組みが何もないViteアプリでよく選ばれます。
どちらが速いですか？
解決する問題が違うので、正直に1つの数字で示すことはできません。Viteは開発中にソースファイルを必要に応じて配信するため、起動が速いです。Next.jsは最初のリクエストで完成したHTMLを送れるので、コンテンツページの最初の表示に役立ちます。一般的なベンチマークを信じるより、自分のアプリで計測しましょう。
Viteアプリは無料でホスティングできますか？
distフォルダーはただのHTML、CSS、JavaScriptなので、多くの静的ホスティングサービスが提供している無料プランを含め、どの静的ホストでも配信できます。深いリンクでもindex.htmlが読み込まれるよう、リライトの設定を忘れずに追加してください。
あとからViteからNext.jsに移行するには？
各ルートをapp/配下のフォルダーに移してpage.tsxファイルを置き、状態やブラウザーAPIを使うコンポーネントに'use client'を付け、React Routerのリンクをnext/linkに置き換えます。一度にすべてではなく、ルートごとに計画して進めましょう。
ビルドツールとフレームワークは役割が違う
- Viteはソースファイルを受け取り、開発中はホットモジュールリプレースメントで配信し、ビルド時には最適化された静的アセットを生成します。ルーティング、データの読み込み、ページをどこでレンダリングするかについては何も決めません。
- Next.jsはそれらを代わりに決めてくれます。app/blog/page.tsxに置いたファイルは/blogのルートになり、コンポーネントはデフォルトでサーバーでレンダリングされ、同じプロジェクトにAPIエンドポイントも置けます。この構造は、必要なときには助けになり、不要なときには余計な重さになります。
HTMLがどこから来るか
- ViteのReactアプリはほぼ空のindex.htmlを送り、その後JavaScriptがブラウザー内でページを組み立てます。JavaScriptを実行するクローラーなら読み取れますが、最初のレスポンス自体にはほとんど中身がありません。
- Next.jsのページは、ビルド時またはリクエストごとにレンダリングされた完全なHTMLとして届きます。ブログ、ドキュメント、ランディングページでは、この違いが検索や低速なスマートフォンで効いてきます。
ホスティングは選択に従う
- Viteの静的出力は、リライトルールを1つ設定するだけで、どのファイルホストやCDNでも動きます。Next.jsのすべての機能を動かし続けるには、Node.jsサーバー、コンテナ、またはNext.jsに対応したプラットフォームが必要です。
- Next.jsで静的ページだけが必要なら、静的エクスポートでどこにでもアップロードできるoutフォルダーが得られます。ただしドキュメントに記載されたサーバー専用の機能は使えなくなります。
詳細な比較表
React版ViteとNext.jsの比較（2026年10月、各プロジェクトのドキュメントで確認）
- プロジェクトを始める
- npm create vite@latest
- npx create-next-app@latest
- 開発コマンド
- vite (npm run dev)
- next dev (npm run dev)
- デフォルトの開発ポート
- 5173、使用中なら次の空きポートを試す
- 3000、-pまたはPORTで変更
- ビルドをローカルでプレビュー
- ポート4173でvite preview
- ポート3000でnext start
- 本番用バンドラー
- Rolldown
- デフォルトはTurbopack、--webpackでwebpack
- レンダリング
- ブラウザー内（自前のサーバーでSSRも可能）
- コンポーネントごとにサーバー、静的、クライアント
- 静的ホスティング
- 可能、dist/をアップロード
- output: 'export'で可能、out/をアップロード
- 全機能のホスティング
- 不要
- Node.jsサーバー、Docker、またはアダプター
スターターコマンドと設定
Vite：作成、実行、ビルド
react-tsテンプレートでTypeScriptのReactアプリができます。ビルド結果はdistに出力され、プレビューサーバーで確認できます。
ポートを固定したvite.config.ts
strictPortを指定すると、Viteは黙って別のポートに移らずエラーで停止するため、OAuthのコールバックURLが変わりません。
Next.js：作成、実行、ビルド
next buildは.nextにコンパイルし、next startはすべてのサーバー機能を有効にした状態でそれを配信します。
静的エクスポート用のnext.config.js
この設定でnext buildはHTMLファイルをout/に書き出し、どの静的ホストにもそのまま置けます。
- 検索やSNSのプレビューのため、ページの内容が最初のHTMLレスポンスに含まれている必要がある。
- すべてがログインの奥にあるので、検索順位は関係ない。
- 同じプロジェクト内にAPIエンドポイントやフォーム処理がほしい。
- ただのファイルを好きな静的ホストやCDNにアップロードしたい。
- ウィジェット、ブラウザー拡張機能のUI、埋め込みツールを作っている。
- フォルダーとファイルでルートが決まる仕組みが好き。
- ルーターやデータ取得ライブラリは自分で選びたい。
- リクエストごとに変わるデータを表示するページがある。
条件チェッカー
プロジェクトの条件
Vite
おすすめを表示するには、少なくとも1つの項目にチェックを入れてください。
Vite寄り：あなたの条件のうち{n}件がクライアント側アプリを示しています。
Next.js寄り：あなたの条件のうち{n}件がサーバーレンダリングかサーバー側のコードを示しています。
引き分けです。セットアップの速さを最優先するならVite、公開ページを検索で上位表示させたいならNext.jsから始めましょう。
理由
すべてクリア
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る