はじめに
この記事では、Cloudflare Pages と GitHub を連携して、Next.js（静的エクスポート）のアプリをホスティングするまでの手順を、Cloudflare初心者の方にもわかるよう丁寧に解説します。
GitHub連携の最大のメリットは、git push するだけで自動デプロイが走る点です。ファイルを手動でアップロードする手間がなく、開発→公開のサイクルがスムーズになります。
対象読者
- Cloudflare Pagesを初めて使う方
- GitHubは使ったことがある（リポジトリの作成・pushができる）方
- Next.jsアプリ（静的エクスポート）をホスティングしたい方
この記事でやること
- Next.jsアプリが静的エクスポートに対応していることを確認
- CloudflareとGitHubを連携してPagesプロジェクトを作成
- ビルド設定を行ってデプロイ
- 自動デプロイの動作を確認
前提条件
- Cloudflareアカウントが作成済みであること
- GitHubアカウントを持っており、アプリのリポジトリがpush済みであること
- ローカルにGitおよびNode.jsがインストールされていること
:::note info Cloudflare Pagesの無料枠について Cloudflare Pagesは無料プランでも月500回のビルド、無制限のリクエスト・帯域幅が利用できます。個人プロジェクトや小規模アプリなら十分すぎるほどです。 :::
ステップ1：Next.jsアプリが静的エクスポートに対応していることを確認する
Cloudflare Pagesに静的サイトとしてデプロイするには、Next.jsの output: "export" 設定が必要です。この設定によりビルド時にすべてのページが静的HTMLとして書き出されます。
1-1. next.config.tsを確認する
プロジェクトルートの next.config.ts（または next.config.js）を開き、output: "export" が設定されていることを確認します。
// next.config.ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
output: "export",
};
export default nextConfig;
:::note warn output: "export" が設定されていない場合 この設定がないと npm run build を実行しても out/ ディレクトリが生成されず、Cloudflare Pagesでのデプロイが失敗します。必ず確認してください。 :::
:::note info output: "export" の制約について 静的エクスポートではサーバーサイドの機能（APIルート、SSR、ISRなど）は使用できません。あくまで全ページを静的HTMLとして書き出す構成に限られます。 :::
1-2. ローカルでビルドを試してみる（任意）
デプロイ前にローカルで out/ ディレクトリが正しく生成されるか確認しておくと安心です。
npm run build
ビルドが成功すると、プロジェクトルートに out/ ディレクトリが生成されます。
my-app/
├── out/ ← これがデプロイされる静的ファイル群
│ ├── index.html
│ └── ...
├── src/
├── public/
└── next.config.ts
ステップ2：CloudflareとGitHubを連携してPagesプロジェクトを作成する
2-1. Cloudflareダッシュボードにログイン
https://dash.cloudflare.com/ にアクセスしてログインします。
2-2. Pagesプロジェクトを新規作成する
左サイドバーの 「ビルド]」 - 「コンピュート」 - 「Workers & Pages」 をクリックします。
画面上部の 「アプリケーションを作成する」（Create application）ボタンをクリックします。
「新しいものを作成」 画面が表示されたら、画面下部の 「レガシー Pages ワークフローを使用しますか？ Pages に続行」 のリンクをクリックします。
2-3. デプロイ方法を選択する
「始めましょう」 画面（Pages用）が表示されます。以下の2択から選択できます。
| 選択肢 | 説明 |
|---|---|
| 既存の Git リポジトリをインポートする | GitHubのリポジトリと連携してデプロイ（今回はこちら） |
| ファイルをドラッグアンドドロップする | ファイルを直接アップロードしてデプロイ |
「既存の Git リポジトリをインポートする」 の右にある 「始める」 ボタンをクリックします。
2-3. GitHubと連携する
「新しいものを作成」 画面が表示されます。選択肢の中から 「Continue with GitHub」 をクリックします。
:::note info 画面下部に「レガシー Pages ワークフローを使用しますか？ Pages に続行」というリンクが表示されることがあります。こちらは旧UIへのリンクです。特別な理由がなければ 「Continue with GitHub」 から進んでください。 :::
2-4. GitHubアカウントを連携する
次の画面でGitHubアカウントとの連携を設定します。「Connect GitHub」 ボタンをクリックすると、GitHubの認証画面が開きます。
「Authorize Cloudflare Pages」 をクリックして許可します。
:::note warn アクセス権限の範囲について 「All repositories（すべてのリポジトリ）」か「Only select repositories（特定のリポジトリのみ）」を選べます。セキュリティの観点から、「Only select repositories」 を選んで、Pagesに使うリポジトリだけを指定することをおすすめします。 :::
認証後、CloudflareのダッシュボードにGitHubのリポジトリ一覧が表示されます。
2-5. リポジトリを選択する
デプロイしたいリポジトリを選択し、「次へ」 をクリックします。
ステップ3：ビルド設定をしてデプロイする
3-1. プロジェクト名とブランチを設定する
以下の項目を設定します。
| 項目 | 設定値 | 説明 |
|---|---|---|
| プロジェクト名 | 任意 |
プロジェクト名.pages.dev のURLになる |
| プロダクションブランチ | main |
このブランチへのpushで本番デプロイが走る |
:::note warn プロジェクト名はあとから変更できません。わかりやすい名前をつけておきましょう。 :::
3-2. ビルド設定を行う
Next.js（静的エクスポート）の場合、以下のとおり設定します。
| 項目 | 設定値 |
|---|---|
| フレームワークプリセット | Next.js (Static HTML Export) |
| ビルドコマンド | npm run build |
| ビルド出力ディレクトリ | out |
「Next.js」（Static HTML Exportではない方）を選ぶと設定が異なるので注意してください。 :::
:::note warn 出力ディレクトリは必ず out を指定する ここを空欄またはリポジトリルートにすると、README.md やソースコードなど不要なファイルまで公開されてしまいます。out と入力して、ビルド済みの静的ファイルだけを配信するようにしましょう。 :::
3-3. 最初のデプロイを実行する
「保存してデプロイする（Save and Deploy）」ボタンをクリックします。
Cloudflare側で npm install → npm run build が自動実行され、out/ の中身がデプロイされます。ビルドログがリアルタイムで表示されるので、エラーが出た場合はここで確認できます。
「Success」と表示されたら完了です。以下のURLでアプリにアクセスできます。
https://プロジェクト名.pages.dev
ブラウザで開いて、アプリが正しく表示されることを確認しましょう。
ステップ4：自動デプロイを体験してみる
GitHub連携の醍醐味である自動デプロイを確認してみましょう。
手順
- ローカルでコードを編集する
- 変更をコミット＆pushする
git add .
git commit -m "update app"
git push
- Cloudflareのダッシュボードで「デプロイ」タブを開く
- 新しいデプロイが自動的に開始されているのを確認できる
- デプロイ完了後、アプリに変更が反映されていることを確認する
:::note info プレビューデプロイについて main 以外のブランチにpushすると、プレビューURL（例：ブランチ名.プロジェクト名.pages.dev）が自動生成されます。本番に影響を与えずに動作確認できるため、開発時に非常に便利です。 :::
よくあるトラブルと対処法
Q. GitHubのリポジトリ一覧がCloudflareに表示されない
GitHub連携時に「Only select repositories」を選んだ場合、対象リポジトリが含まれていない可能性があります。GitHubの「Settings」→「Applications」→「Cloudflare Pages」からリポジトリのアクセス権限を追加してください。
Q. デプロイが失敗する（ビルドエラー）
ビルドログを確認してください。よくある原因と対処法は以下のとおりです。
| 原因 | 対処法 |
|---|---|
| Node.jsのバージョン不一致 | 環境変数 NODE_VERSION にローカルと同じバージョンを指定する（例：20） |
output: "export" が未設定 |
next.config.ts に output: "export" を追加する |
| ビルドコマンドの誤り |
npm run build になっているか確認する |
:::note info Node.jsバージョンの指定方法 Cloudflare PagesのダッシュボードでプロジェクトのSettings→Environment variablesから NODE_VERSION を追加することで、使用するNode.jsのバージョンを指定できます。 :::
Q. デプロイは成功しているのにページが表示されない（404になる）
出力ディレクトリが out 以外になっている可能性があります。プロジェクトの設定からビルド出力ディレクトリを out に修正し、再デプロイしてください。
Q. 画像や静的ファイルが表示されない
public/ 配下に置いたファイルはビルド時に out/ へそのままコピーされます。ファイルパスが正しいか確認してください。
まとめ
この記事でやったこと：
- ✅
next.config.tsにoutput: "export"が設定されていることを確認 - ✅ CloudflareとGitHubを連携してPagesプロジェクトを作成
- ✅ ビルドコマンド
npm run build・出力ディレクトリoutを設定してデプロイ - ✅
git pushによる自動デプロイを確認
GitHub連携を使えば、コードを書いてpushするだけで本番公開まで完結します。Cloudflare Pagesは無料・高速・SSL自動対応と三拍子そろったサービスなので、ぜひ活用してみてください！