Skip to content

vinextを導入する(OpenNextと併用可能な形で追加) - #72

Merged
cateiru merged 9 commits into
mainfrom
feat/vinext
Nov 6, 2026
Merged

cateiru merged 9 commits into
mainfrom
feat/vinext

Conversation

@cateiru

@cateiru cateiru commented Nov 6, 2026 •

Copy link
Copy Markdown
Owner

関連: #71

概要

Cloudflare公式ガイド(2026-11-05更新)が Next.js on Workers の既定を OpenNext から vinext に変更したことを受け、vinext 1.4.2 を導入し、本番も vinext でデプロイする方針に切り替えます。vinext init --platform=cloudflare --legacy-wrangler-cloudflare-init で導入しました。マージだけでは本番に反映されず、Cloudflare 側のビルド設定変更(後述)とセットです。

互換性チェック結果

vinext check の結果は 100% compatible(5 supported / 0 partial / 0 issues)でした。

  • App Router、ページ1件・レイアウト1件・not-found 1件
  • next/* の import は next/link のみで、完全サポート

変更点

  • package.json: dev:vinext / build:vinext / start:vinext / deploy:vinext スクリプトと vinext 関連の依存を追加、"type": "module" を追加
  • vite.config.ts: vinext init が生成したものを追加
  • wrangler.jsonc: main を .open-next/worker.js から vinext/server/fetch-handler に変更し、images バインディング(IMAGES)を追加。cache.enabled は init が false に変えていたため、従来どおり true に戻しています。あわせて compatibility_flags に enable_weak_ref を追加(Codex レビュー P2 対応)
  • postcss.config.js → postcss.config.cjs にリネーム("type": "module" 化に伴う init の処理)
  • next-env.d.ts: vinext の型拡張 import を追加(init の処理)
  • wrangler を 4.153.0 → 4.156.2 に更新(@cloudflare/vite-plugin の peer 要件 ^4.156.1 を満たすため)

Cloudflare 側で必要な設定変更(Workers Builds)

現在の設定は OpenNext 前提(ビルド: pnpm exec opennextjs-cloudflare build、デプロイ: npx wrangler deploy、バージョン: npx wrangler versions upload)のため、マージ前後に以下へ変更が必要です。build:vinext が生成する dist/server/wrangler.json(main: index.js、assets は ../client)を使う形です。

  • ビルド コマンド: pnpm run build:vinext
  • デプロイ コマンド: pnpm exec wrangler deploy --config dist/server/wrangler.json
  • バージョン コマンド: pnpm exec wrangler versions upload --config dist/server/wrangler.json

Codex レビュー P1(共有 main の変更で OpenNext の preview/deploy が壊れる)については、本番経路を vinext に一本化する方針のため、設定分割ではなくこの切り替えで対応します。OpenNext 用の preview / deploy スクリプトは残りますが、本番経路ではなくなります。

検証結果

  • pnpm build:vinext(vite build): 成功。生成された dist/server/wrangler.json に enable_weak_ref が含まれることも確認
  • pnpm start:vinext(wrangler dev で本番ビルドを起動): GET / → 200、存在しないパス → 404(not-found ページ)を確認
  • pnpm dev:vinext(vite dev): enable_weak_ref の追加により GET / → 200 を確認(追加前は WeakRef is not defined で 500 でした)
  • 従来経路の確認: pnpm build(next build)成功、pnpm typecheck 成功、pnpm check(biome)成功

注意点

  • next-env.d.ts は next build と vinext build の双方が再生成し、形が異なります(vinext 側は型拡張 import を含み root-params.d.ts を含まない)。最後に実行したビルドの形になります
  • ローカルでは、ビルド成果物 .open-next/ が残っていると vinext build がそれを拾って失敗します(CI は毎回新規 checkout のため影響なし)
  • デプロイは未実施です。Cloudflare 側の設定変更後にブランチビルドで確認し、マージで本番へ反映されます

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Nov 6, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-11-06T10:28:58.364044Z 8b31782 New commits
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Nov 6, 2026 •

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
cateiru-com 8b31782 Commit Preview URL

Branch Preview URL
Nov 06 2026, 10:28 AM

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 8c3e5db237

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread wrangler.jsonc Resolved
Comment thread package.json Resolved
@cateiru cateiru self-assigned this Nov 6, 2026

@cateiru cateiru left a comment

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

レビューまとめ

vinext の導入と本番経路の切り替え方針は、PR 説明・検証内容ともに丁寧で分かりやすいです。Codex の P1/P2 指摘への対応(enable_weak_ref の追加、Workers Builds 側の設定変更)も確認しました。マージ前に検討してほしい点を以下にまとめます。

1. CI と VRT が本番経路(vinext)を検証していない(重要)

  • .github/workflows/ci.yml の ci ジョブは pnpm build(next build)しか実行しておらず、build:vinext は CI で実行されません。
  • playwright.vrt.config.ts の webServer は pnpm build && pnpm start(next start)で起動しています。そのため VRT の「変化なし 4 件」は Next.js 本体でのレンダリング結果 の比較で、本番の vinext 出力が見た目上変わっていないことの保証にはなっていません。
  • 特に CSS Modules のクラス名の生成方法は vite.config.ts の generateScopedName によって Next.js と異なります。CSS 周りの差分は vinext 側でしか出ない可能性があります。

本番を vinext に一本化するなら、次の対応をおすすめします。

  • ci ジョブに pnpm build:vinext を追加する
  • VRT の webServer を pnpm build:vinext && pnpm start:vinext 相当に切り替える(少なくとも vinext 側でも撮る)

2. ドキュメントが OpenNext 前提のまま

CLAUDE.md の「デプロイ先: Cloudflare Workers(@opennextjs/cloudflare 経由)」「デプロイフロー」と、README.md の npm run preview は OpenNext 前提の記述のままです。本番経路が変わるので、vinext 用のコマンドと、Workers Builds の設定(ビルド / デプロイ / バージョンコマンド)を追記しておくと、あとで迷わずに済みます。

3. OpenNext 経路の扱い(フォローアップで可)

preview / deploy スクリプト、open-next.config.ts、@opennextjs/cloudflare(latest 指定)が残っています。ただ wrangler.jsonc の main が vinext 向けに変わったため、Codex の指摘どおりこれらはもう正しく動かないはずです(未検証です)。「legacy として残す」なら動かないことを明記し、不要なら別 PR で削除するのがよいと思います。あわせて、next-env.d.ts がビルドのたびに書き換わる問題も、OpenNext/Next ビルドの経路を整理すれば解消しやすくなります。

4. 細かい点(インラインコメント参照)

  • react / react-dom の宣言範囲が vinext の peer 要件(^19.3.1)より低い。Renovate のグループに react-server-dom-webpack が入っていない
  • wrangler.jsonc の assets.directory が .open-next/assets のまま
  • 使っていない images バインディング / imagesOptimizer()

Generated by Claude Code

Comment thread package.json Outdated
Comment on lines +27 to +29
"react": "^19.1.0",
"react-dom": "^19.1.0"
"react-dom": "^19.1.0",
"react-server-dom-webpack": "^19.3.1",

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

vinext@1.4.2 と react-server-dom-webpack@19.3.1 は peerDependencies で react / react-dom に ^19.3.1 を要求しています(pnpm-lock.yaml 参照)。一方 package.json の宣言は ^19.1.0 のままです。今の lockfile は 19.3.1 に解決されているので実害はありませんが、宣言上の下限が実際の要件より低くなっています。react / react-dom も ^19.3.1 に揃えておくと意図が明確になります。

あわせて renovate.json の "React" グループに react-server-dom-webpack が入っていません。RSC ランタイム(react-server-dom-*)は基本的に react と同じバージョンで使う前提なので、別々の PR で上がるとバージョンがずれるおそれがあります(推測を含みます。ずれたときの具体的な壊れ方は未確認です)。グループに追加しておくのがおすすめです。vinext 関連(vinext, @vinext/*, vite, @vitejs/plugin-rsc, @cloudflare/vite-plugin)も、まとめて上げるグループを作っておくと保守しやすいと思います。


Generated by Claude Code

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Addressed in a4350c9: bumped the declared ranges of react and react-dom to ^19.3.1 to match the peer requirement, and added react-server-dom-webpack to the React group in renovate.json.

Comment thread wrangler.jsonc
],
"preview_urls": true,
"assets": {
"directory": ".open-next/assets",

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

main は vinext 向けに変わりましたが、assets.directory は .open-next/assets のままです。PR 説明のとおり、本番は build:vinext が生成する dist/server/wrangler.json(assets は ../client)を使うので、この値は実際には使われていないはずです。ただソース側の設定に OpenNext の出力パスが残っていると、あとで読んだときに混乱しやすいです。

本番経路を vinext に一本化する方針であれば、main と同じく vinext 前提の値に揃えるか、「vite build 時に上書きされる」旨を JSONC のコメントで残しておくとよいと思います。


Generated by Claude Code

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Addressed in b08402e: kept the value, and added a JSONC comment above assets noting that it is overwritten by the generated dist/server/wrangler.json at vite build time.

Comment thread wrangler.jsonc Outdated
}
]
],
"images": { "binding": "IMAGES" }

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: vinext check の結果どおり、このサイトの next/* の import は next/link だけで、next/image は使っていません。images バインディング(IMAGES)と、vite.config.ts の imagesOptimizer() は init が自動で追加したものだと思います。現時点では不要なので、外しておくと構成がシンプルになり、Cloudflare Images バインディングへの依存も持たずに済みます。将来 next/image を使う予定があるなら、このままで問題ありません。


Generated by Claude Code

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Addressed in b08402e: removed the unused images binding from wrangler.jsonc and imagesOptimizer() from vite.config.ts, since next/image is not used. Verified that pnpm build:vinext passes and the generated config no longer contains the IMAGES binding.

@cateiru

cateiru commented Nov 6, 2026

Copy link
Copy Markdown
Owner Author

レビューまとめへの対応です。

  1. CI / VRT(15ee14c): ci ジョブに pnpm build:vinext を追加し、VRT の webServer を pnpm build:vinext && pnpm start:vinext に切り替えました。ローカルで pnpm vrt を実行し、既存スナップショットに対して4件すべて通過することを確認しています。
  2. ドキュメント(8b31782): CLAUDE.md と README.md を vinext 前提に更新しました(vinext のコマンド、Workers Builds のビルド / デプロイ / バージョンコマンド、OpenNext が legacy である旨を記載)。
  3. OpenNext 経路: 先行して 18572b7 で wrangler.opennext.jsonc に設定を分離し、pnpm preview が HTTP 200 を返すことまで確認済みです。@opennextjs/cloudflare の latest 指定の固定と OpenNext 資材の削除は、ご指摘のとおりフォローアップ(別 PR)として扱います。

細かい点(react の宣言範囲、assets、images)には各インラインコメントへ返信しました。

@github-actions

github-actions Bot commented Nov 6, 2026

Copy link
Copy Markdown

VRT (reg-suit) 結果

ステータス 件数
差分あり 0
新規 0
削除 0
変化なし 4

reg-suit レポートを見る

@cateiru cateiru left a comment

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

再レビュー(8b31782 時点)

前回の指摘への対応を確認しました。いずれも問題ありません。

前回の指摘 対応 確認結果
CI / VRT が vinext を検証していない 15ee14c ✅ ci ジョブに pnpm build:vinext を追加。VRT の webServer は pnpm build:vinext && pnpm start:vinext --port に変更。CI・VRT ともに成功しています
ドキュメントが OpenNext 前提 8b31782 ✅ CLAUDE.md / README.md に vinext のコマンドと Workers Builds の設定、OpenNext が legacy である旨を記載。Next.js 15 → 16 の表記も修正済み
OpenNext 経路が壊れる 18572b7 ✅ wrangler.opennext.jsonc(main: .open-next/worker.js)に分離し、preview / deploy の build・preview・deploy すべてに --config を指定
react の宣言範囲 / Renovate a4350c9 ✅ ^19.3.1 に揃え、React グループに react-server-dom-webpack を追加
assets.directory b08402e ✅ 上書きされる旨のコメントを追加
未使用の images b08402e ✅ バインディングと imagesOptimizer() を削除

特に VRT は、main のベースライン(Next.js でのスクリーンショット)と vinext のスクリーンショットを比べる形になりました。その結果が「差分あり 0 / 変化なし 4」なので、vinext に切り替えても見た目が変わらないことを確認できたと言えます。

残っている点(いずれも任意・別 PR で可)

  • Renovate で vinext 関連(vinext, @vinext/*, vite, @vitejs/plugin-rsc, @cloudflare/vite-plugin)をまとめて上げるグループはまだありません。@cloudflare/vite-plugin は既存の "Cloudflare" グループ(@cloudflare/*)に入るので、wrangler と一緒に上がります(peer 要件の関係でむしろ都合がよいはずです)。残りは個別の PR になるため、必要に応じて追加してください。
  • wrangler.jsonc と wrangler.opennext.jsonc で name / routes / cache が重複しています。legacy 経路を削除するフォローアップまでの一時的な状態なので、このままで問題ないと思います。

マージしてよい状態だと思います 👍


Generated by Claude Code

@cateiru
cateiru merged commit 5ab1bb5 into main Nov 6, 2026
3 checks passed
@cateiru
cateiru deleted the feat/vinext branch November 6, 2026 11:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant