アプリの種類とホストを選ぶと、ビルドコマンド、出力フォルダー、そしてリロード時の404を防ぐリライト用ファイルがわかります。Vercel、Netlify、Cloudflare、GitHub Pagesに対応しています。
Reactアプリをデプロイするには、本番ビルドを実行し、出力フォルダーをホストに渡します。Viteならdist、Next.jsの静的エクスポートならoutです。シングルページアプリでは、未知のパスをindex.htmlに送るリライトも必要で、これがないとディープリンクをリロードしたときに404になります。完全なNext.jsアプリには、Node.jsを実行できるホストが必要です。
アプリの種類別のビルド出力
Reactのデプロイの失敗は、ほとんどが3つの原因に行き着きます。出力フォルダーの間違い、クライアントサイドのルート用リライトの欠落、そしてサーバーが必要なNext.jsの機能を静的ホストに送ってしまうことです。下でアプリの種類とホストを選ぶと、その組み合わせに必要な設定とファイルが正確にわかります。いずれも各ホスト自身のドキュメントに基づいています。
ルーターはブラウザー内にありますが、リロードするとサーバーに/about/index.htmlのような存在しないファイルを要求することになります。未知のパスに対してindex.htmlを返すリライトがあれば、再びルーターが処理を引き継げます。そのルールの書き方はホストごとに異なります。
ビルドの最上位に404.htmlがなければ不要です。Cloudflareのドキュメントによると、その場合Pagesはプロジェクトをシングルページアプリとして扱い、実在するファイルではないすべてのパスにルートのindexを返します。
output: 'export'による静的エクスポートとしてのみ可能です。GitHub Pagesはファイルを配信するだけでNext.jsのサーバーを実行できないため、サーバーアクション、Cookie、リライト、オンデマンドレンダリングなどの機能は使えません。
リダイレクトはブラウザーを新しいURLに移動させるので、アドレスバーが変わります。リライトは要求されたURLを保ったまま別のファイルを返すもので、シングルページアプリに必要なのはこちらです。Netlifyでは、リライトをステータス200で表します。
コミットした.envファイルではなく、ホストのプロジェクト設定で指定します。ブラウザーに配信される変数は公開されることを忘れずに、非公開にすべきキーはサーバーかサーバーレス関数に置きましょう。
キャッチオールのルールを書く場所（各ホストのドキュメントより、2026年10月時点）
1行の_redirectsファイルと同じルールです。ステータス200により、訪問者が要求したアドレスが保たれます。
Viteのデプロイガイドにあるワークフロー（各アクションをコミットに固定しています）を元にしています。mainへのpushのたびにビルドし、distを公開します。「Settings」の「Pages」で、ソースとしてGitHub Actionsを有効にしてください。
リポジトリをインポートすると、VercelがViteを検出します。ディープリンクでアプリが読み込まれるよう、このファイルをプロジェクトのルートに追加してください。
ビルドコマンドはnpm run build、公開ディレクトリはdistです。Viteがdistにコピーするよう、この行をpublic/_redirectsとして保存してください。
リポジトリを接続し、Viteのプリセットを選びます。distの最上位に404.htmlがない限り、Pagesが未知のパスにルートのindexを返すので、ルールは不要です。
baseをリポジトリ名に設定し、GitHub Actionsでビルドしてdistを公開します。GitHub Pagesには独自の404.htmlはありますがリライトのルールはないため、ビルド後にindex.htmlを404.htmlにコピーするのが一般的な回避策です。その場合、ディープリンクはステータス404で読み込まれます。
VercelはNext.jsを直接ビルドするので、ここでは静的エクスポートは任意です。どこでも同じファイルを使いたい場合にだけ残しましょう。
公開ディレクトリをoutに設定します。各ルートにはすでに専用のHTMLファイルがあるので、キャッチオールのリライトは不要です。
npm run buildを使い、出力ディレクトリをoutにします。エクスポートには404.htmlが含まれるので、Pagesは存在しないパスにホームページではなくそれを返します。
ここでNext.jsを動かす方法は静的エクスポートだけです。サイトがリポジトリのパス配下にある場合は、basePathをそれに合わせてください。
リポジトリをインポートしてデプロイします。Vercelは、Next.jsのデプロイドキュメントに掲載されている検証済みアダプターの1つです。
Netlifyは独自の連携機能でNext.jsを実行しますが、Next.jsのドキュメントではまだ検証済みアダプターとして掲載されていません。機能の欠落がないか、Netlifyのドキュメントを確認してください。
Cloudflareは独自の連携機能でWorkers上にNext.jsを実行しますが、こちらもまだ検証済みアダプターではありません。Pagesの静的な手順ではなく、Cloudflareのフレームワークガイドに従ってください。
できません。GitHub Pagesはファイルを配信するだけで、next startを実行できません。静的エクスポートに切り替えるか、Node.jsを実行できるホストを選んでください。
Vite + React
Next.jsの静的エクスポート
完全なNext.jsアプリ
Vercel
Netlify
Cloudflare Pages
GitHub Pages
何を作りましたか？
どこで動かしますか？
アプリとホストのすべての組み合わせ
コピー
無料で始める · クレジットカード不要