CodeGridの連載「Webサイトホスティングで使うCloudflare Workers」第3回のサンプルです。Next.jsで作ったサイトをCloudflare Workersにデプロイし、静的エクスポート（SSG）とOpenNextアダプターによるSSRの両方を動かすところまでを扱います。
記事の手順を1ステップずつコミットに分けていますので、git logを追いながら、どのファイルがどの段階で変わったのかを確認できます。
| コミット | 内容 | 記事の対応箇所 |
|---|---|---|
Initial commit from create-next-app |
npx create-next-app@latest（App Router、TypeScript） |
Next.jsの準備 |
| 静的エクスポートを有効にして… | output: 'export'と、outを配信するwrangler.jsonc |
SSGの場合 |
| next/imageのデフォルトの… | images.unoptimizedの指定 |
静的エクスポートと画像最適化 |
| OpenNextアダプターを導入して… | npx opennextjs-cloudflare migrateが生成した各ファイル |
SSRの場合（OpenNext） |
| オンデマンドレンダリング（SSR）の… | dynamic = 'force-dynamic'の/ssrと、/api/hello |
SSRアダプターの導入 |
なお、SSRに切り替える段階で、静的エクスポート用の設定（output: 'export'とimages.unoptimized）はnext.config.tsから削除しています。migrateコマンドはここまでは面倒を見てくれないので、残したままだとOpenNextのビルドが失敗します。
依存パッケージをインストールします。
npm install
Next.jsの開発サーバーで確認する場合は次のとおりです。ただし、この方法ではWorkersのランタイム（workerd）は使われず、Node.jsで動きます。
npm run dev
workerd上での挙動を確認したい場合は、ビルドしてからWranglerの開発サーバーを起動します。npm run previewがその両方をまとめて実行します。
npm run preview
/は静的なページ、/ssrはリクエストのたびにレンダリングされるページです。リロードするたびに表示時刻が変わることを確認してみてください。/api/hello?name=CodeGridは、リクエストの内容を読むRoute Handlerです。存在しないパス（/no-such-pageなど）にアクセスすると404が返ります。
Cloudflareアカウントにログインした状態でデプロイします。
npm run deploy
いきなり本番に反映せず、プレビュー用のURLで確認したい場合は次のようにします。実行後に出力されるVersion Preview URL:のURLでプレビューできます。
npm run upload
なお、wrangler.jsoncのnameは2026-workers-hosting-nextjsにしてありますので、自分のアカウントにデプロイする際は適宜変更してください。servicesのWORKER_SELF_REFERENCEはnameと一致させる必要がある点に注意してください。
cloudflare-env.d.tsは自動生成されるファイルのため、リポジトリには含めていません。型が必要な場合は次のコマンドで生成できます。
npm run cf-typegen