Next.jsの静的サイトをCloudflare Workersへ公開する手順｜運用中の設定とGA4の確認

結論：HTMLを生成できるサイトなら、outを配信する

この「レンタルサーバー比較ナビ」は、Next.jsで記事のHTMLを生成し、Cloudflare WorkersのStatic Assetsで公開しています。記事はMDXで管理し、更新時に手元でビルドする構成です。

この記事はこのサイトで使っている設定と、姉妹サイトの移行時に残した運用記録を基にした手順です。VPSやWordPressの契約・性能を実測したレビューではありません。設定と公式ドキュメントの確認日は2026年10月17日です。

ホスティングそのものの比較は静的サイトの無料ホスティング比較に分けています。ここでは既存のNext.jsプロジェクトを公開する作業に絞ります。

1. Next.jsで静的書き出しを有効にする

以下はこのサイトの next.config.ts から公開に関係する項目を抜き出したものです。既存の設定があれば、必要な項目を追加してください。

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: "export",
  images: {
    unoptimized: true,
  },
};

export default nextConfig;

output: "export" を指定してビルドすると、この構成では out/ にHTMLなどが生成されます。images.unoptimized は、配信先でNext.jsの画像最適化サーバーを動かさないための設定です。画像はアップロード前に適切な大きさにしておきます。

pnpm install
pnpm build

記事URLが /posts/[slug] のような動的ルートなら、ビルド時に対象slugを列挙できることも必要です。このサイトでは generateStaticParams で記事一覧から生成しています。書き出せない機能があるときは、ビルドエラーを確認してから構成を選び直します。Next.js公式の静的書き出しガイド

2. Wranglerでoutを配信する

Wranglerをプロジェクトの開発依存に追加します。すでに入っていれば追加は不要です。

pnpm add -D wrangler

プロジェクト直下の wrangler.jsonc に、配信対象を指定します。下はこのサイトの設定を短くした例で、name は自分のサイト用に置き換えます。既存のWorker名を使うと更新対象になるため、公開先の名前を確認してください。

{
  "$schema": "./node_modules/wrangler/config-schema.json",
  "name": "my-static-blog",
  "compatibility_date": "2026-08-18",
  "assets": {
    "directory": "./out",
    "html_handling": "auto-trailing-slash",
    "not_found_handling": "404-page"
  },
  "workers_dev": true
}

この構成はWorkerのプログラムを持たず、生成済みのファイルを配ります。SPAのように、存在しないURLをすべてトップページへ返す設定にはしていません。Cloudflare公式のStatic Assets

まずローカルで配信します。

pnpm exec wrangler dev

表示されたURLでトップページと記事を開いてください。上の設定ではHTMLファイルの配置に応じてURL末尾のスラッシュが正規化されます。/about.html を生成した場合と /about/index.html を生成した場合で扱いが異なるため、自分の出力で確認します。Cloudflare公式のHTML handling

3. 公開前にアクセス解析の値を確認する

姉妹サイトの移行で見落としたのが、ビルドするマシンの環境変数でした。運用記録には、必要な値がない状態でビルドしたため、アクセス解析タグが本番HTMLに出ていなかったことが残っています。

このサイトのGoogle Analyticsコンポーネントは NEXT_PUBLIC_GA_MEASUREMENT_ID を読み、値が空ならタグを出さない実装です。この変数名はこのサイトで決めたもので、Next.jsに自動でGA4を設定する機能があるわけではありません。

環境変数に公開用の値を設定し、その後でビルドします。Next.jsの NEXT_PUBLIC_* はビルド時にクライアント用のコードへ組み込まれ、配信先で値を変えただけでは生成済みファイルに反映されません。秘密のAPIキーをこの接頭辞で定義しないでください。Next.js公式の環境変数ガイド

このサイトでは次の順で確かめます。

1. ブラウザでページを開き、開発者ツールのNetworkで gtag/js の読み込みを確認する。
2. リクエスト先の測定IDがそのサイトのGA4プロパティのものか照合する。
3. GA4のリアルタイムで閲覧イベントを確認する。タグの存在だけで計測成功とは判定しない。

同意設定やブラウザのブロック機能によって送信されない場合もあります。イベントが出ないときは、まずNetworkとコンソールで送信状況を確認します。

4. 公開して記事URLまで確認する

Cloudflareにログインし、対象アカウントを確認してから公開します。以下の deploy は本番の公開先を作成・更新するコマンドです。

pnpm exec wrangler login
pnpm exec wrangler whoami
pnpm build
pnpm exec wrangler deploy

複数アカウントを使っている場合は、whoami の結果とサイトを置くアカウントが一致していることを確認します。公開後はWranglerが表示したURLを開きます。

公開先URLをビルド時に参照する実装では、URL変更後に再ビルドが必要です。また、旧サイトから移す場合は、この手順とは別に旧URLからのリダイレクトを設計します。新しいURLが表示できただけで移行完了にはしません。

静的サイトが合わないと分かったら

このサイトでは記事更新のたびにビルドする方法で運用しています。一方、ブラウザの管理画面から投稿したい人には、WordPressのほうが作業を続けやすい場合があります。

WordPressで始めるなら、WordPressブログの始め方とレンタルサーバー比較で必要な機能を確認してください。セットアップ支援を重視する場合の候補としてConoHa WINGがあります。ただし、この手順の out/ をアップロードしてWordPressへ変換できるわけではなく、記事の移行や運用方法の変更が必要です。契約前に料金・更新条件も確認します。

独自の常駐アプリやDocker環境を自分で運用したいなら、個人開発向けVPS比較も選択肢です。OSの更新やバックアップまで自分で管理する負担を含めて判断してください。

まずは pnpm build で必要なページを書き出せるかを確認し、Wranglerのローカル配信で記事URLと404まで確かめるところから始めると、公開後の見落としを減らせます。