chore: add skew-version support in Cloudflare open-next worker (#7980)

* chore: add skew-version support in Cloudflare open-next worker

* fix typo

* update ids in wrangler.jsonc file

* chore: update cloudflare kv binding name

* chore: fix incorrect cloudflare:deploy script

* add missingle compat_flag

* fix incorrect CF_PREVIEW_DOMAIN

* bump open-next adapter and wrangler packages

* bump form-data

* import open-next adapter in next.config.mjs only if necessary

Author: dario-piotrowicz

apps/site/next.config.mjs

@@ -95,6 +95,16 @@ const nextConfig = {
       'shiki',
     ],
   },
+  // If we're building for the Cloudflare deployment we want to set
+  // an appropriate deploymentId (needed for skew protection)
+  // TODO: The `OPEN_NEXT_CLOUDFLARE` environment variable is being
+  //       defined in the worker building script, ideally the open-next
+  //       adapter should set it itself when it invokes the Next.js build
+  //       process, onces it does that remove the manual `OPEN_NEXT_CLOUDFLARE`
+  //       definition in the package.json script.
+  deploymentId: process.env.OPEN_NEXT_CLOUDFLARE
+    ? (await import('@opennextjs/cloudflare')).getDeploymentId()
+    : undefined,
 };
 
 const withNextIntl = createNextIntlPlugin('./i18n.tsx');

apps/site/open-next.config.ts

@@ -1,6 +1,17 @@
+import type { OpenNextConfig } from '@opennextjs/cloudflare';
 import { defineCloudflareConfig } from '@opennextjs/cloudflare';
 import incrementalCache from '@opennextjs/cloudflare/overrides/incremental-cache/kv-incremental-cache';
 
 const cloudflareConfig = defineCloudflareConfig({ incrementalCache });
 
-export default { ...cloudflareConfig, buildCommand: 'pnpm build:default' };
+const openNextConfig: OpenNextConfig = {
+  ...cloudflareConfig,
+  buildCommand: 'pnpm build:default',
+  cloudflare: {
+    skewProtection: {
+      enabled: true,
+    },
+  },
+};
+
+export default openNextConfig;

apps/site/package.json

@@ -7,8 +7,8 @@
     "build:blog-data": "cross-env NODE_NO_WARNINGS=1 node ./scripts/blog-data/generate.mjs",
     "build:blog-data:watch": "node --watch --watch-path=pages/en/blog ./scripts/blog-data/generate.mjs",
     "build:default": "cross-env NODE_NO_WARNINGS=1 next build",
-    "cloudflare:build:worker": "opennextjs-cloudflare build",
-    "cloudflare:deploy": "wrangler deploy",
+    "cloudflare:build:worker": "OPEN_NEXT_CLOUDFLARE=true opennextjs-cloudflare build",
+    "cloudflare:deploy": "opennextjs-cloudflare deploy",
     "cloudflare:preview": "wrangler dev",
     "predeploy": "node --run build:blog-data",
     "deploy": "cross-env NEXT_PUBLIC_STATIC_EXPORT=true node --run build:default -- --turbo",
@@ -79,7 +79,7 @@
     "@eslint/eslintrc": "~3.3.1",
     "@flarelabs-net/wrangler-build-time-fs-assets-polyfilling": "^0.0.0",
     "@next/eslint-plugin-next": "15.3.4",
-    "@opennextjs/cloudflare": "^1.3.0",
+    "@opennextjs/cloudflare": "^1.6.0",
     "@playwright/test": "^1.53.2",
     "@testing-library/user-event": "~14.6.1",
     "@types/semver": "~7.7.0",
@@ -110,7 +110,7 @@
     "typescript": "catalog:",
     "typescript-eslint": "~8.35.1",
     "user-agent-data-types": "0.4.2",
-    "wrangler": "^4.22.0"
+    "wrangler": "^4.25.1"
   },
   "imports": {
     "#site/*": [

apps/site/wrangler.jsonc

@@ -1,14 +1,24 @@
 {
+  "$schema": "./node_modules/wrangler/config-schema.json",
   "main": ".open-next/worker.js",
   "name": "nodejs-website",
   "compatibility_date": "2024-11-07",
-  "compatibility_flags": ["nodejs_compat"],
-  "account_id": "8ed4d03ac99f77561d0e8c9cbcc76cb6",
+  "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
+  "account_id": "fb4a2d0f103c6ff38854ac69eb709272",
   "minify": true,
   "keep_names": false,
   "assets": {
     "directory": ".open-next/assets",
     "binding": "ASSETS",
+    "run_worker_first": true,
+  },
+  "vars": {
+    // Variables needed for skew protection
+    // Also note that an appropriate CF_WORKERS_SCRIPTS_API_TOKEN secret
+    // needs to be set as well in the Cloudflare dashboard
+    "CF_WORKER_NAME": "nodejs-website",
+    "CF_PREVIEW_DOMAIN": "nodejsorg",
+    "CF_ACCOUNT_ID": "fb4a2d0f103c6ff38854ac69eb709272",
   },
   "observability": {
     "enabled": true,
@@ -25,8 +35,8 @@
   },
   "kv_namespaces": [
     {
-      "binding": "NEXT_CACHE_WORKERS_KV",
-      "id": "32e8e26d2d2647fd96789baf83209fa9",
+      "binding": "NEXT_INC_CACHE_KV",
+      "id": "69b7422d56dd4244bc0127b69ecdc36f",
     },
   ],
 }

packages/rehype-shiki/src/index.mjs

@@ -26,7 +26,7 @@ const { shiki, getLanguageDisplayName, highlightToHast, highlightToHtml } =
     // `WebAssembly.instantiate` with custom imports, which Cloudflare doesn't support
     // for security reasons.
     //
-    // TODO(@avivkeller): When available, use `OPEN_NEXT_CLOUDFLARE` environmen
+    // TODO(@avivkeller): When available, use `OPEN_NEXT_CLOUDFLARE` environment
     // variable for detection instead of current method, which will enable better
     // tree-shaking.
     // Reference: https://github.com/nodejs/nodejs.org/pull/7896#issuecomment-3009480615