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

Author: dario-piotrowicz

apps/site/next.config.mjs

@@ -1,4 +1,5 @@
 'use strict';
+import { getDeploymentId } from '@opennextjs/cloudflare';
 import createNextIntlPlugin from 'next-intl/plugin';
 
 import { BASE_PATH, ENABLE_STATIC_EXPORT } from './next.constants.mjs';
@@ -95,6 +96,9 @@ const nextConfig = {
       'shiki',
     ],
   },
+  // If we're building for the Cloudflare deployment we want to set
+  // an appropriate deploymentId (needed for skew protection)
+  deploymentId: process.env.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,7 +7,7 @@
     "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:build:worker": "CLOUDFLARE=true opennextjs-cloudflare build",
     "cloudflare:deploy": "wrangler deploy",
     "cloudflare:preview": "wrangler dev",
     "predeploy": "node --run build:blog-data",
@@ -80,7 +80,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.5.1",
     "@playwright/test": "^1.53.2",
     "@testing-library/user-event": "~14.6.1",
     "@types/semver": "~7.7.0",

apps/site/wrangler.jsonc

@@ -1,4 +1,5 @@
 {
+  "$schema": "./node_modules/wrangler/config-schema.json",
   "main": ".open-next/worker.js",
   "name": "nodejs-website",
   "compatibility_date": "2024-11-07",
@@ -9,6 +10,15 @@
   "assets": {
     "directory": ".open-next/assets",
     "binding": "ASSETS",
+    "run_worker_first": true,
+  },
+  "vars": {
+    // Variables needed for skew protection
+    // Also not 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": "testing.devprod.cloudflare.dev",
+    "CF_ACCOUNT_ID": "8ed4d03ac99f77561d0e8c9cbcc76cb6",
   },
   "observability": {
     "enabled": true,