@opennextjs/cloudflare 1.4.0 → 1.5.0

package/dist/api/cloudflare-context.d.ts

@@ -26,6 +26,10 @@ declare global {
         NEXT_CACHE_DO_PURGE_BUFFER_TIME_IN_SECONDS?: string;
         CACHE_PURGE_ZONE_ID?: string;
         CACHE_PURGE_API_TOKEN?: string;
+        CF_WORKER_NAME?: string;
+        CF_PREVIEW_DOMAIN?: string;
+        CF_WORKERS_SCRIPTS_API_TOKEN?: string;
+        CF_ACCOUNT_ID?: string;
     }
 }
 export type CloudflareContext<CfProperties extends Record<string, unknown> = IncomingRequestCfProperties, Context = ExecutionContext> = {

package/dist/api/config.d.ts

@@ -63,6 +63,18 @@ interface OpenNextConfig extends AwsOpenNextConfig {
          * @default false
          */
         dangerousDisableConfigValidation?: boolean;
+        /**
+         * Skew protection.
+         *
+         * Note: Skew Protection is experimental and might break on minor releases.
+         *
+         * @default false
+         */
+        skewProtection?: {
+            enabled?: boolean;
+            maxNumberOfVersions?: number;
+            maxVersionAgeDays?: number;
+        };
     };
 }
 /**
@@ -70,4 +82,8 @@ interface OpenNextConfig extends AwsOpenNextConfig {
  * @returns The OpenConfig specific to cloudflare
  */
 export declare function getOpenNextConfig(buildOpts: BuildOptions): OpenNextConfig;
+/**
+ * @returns Unique deployment ID
+ */
+export declare function getDeploymentId(): string;
 export type { OpenNextConfig };

package/dist/api/config.js

@@ -1,3 +1,4 @@
+import assetResolver from "./overrides/asset-resolver/index.js";
 /**
  * Defines the OpenNext configuration that targets the Cloudflare adapter
  *
@@ -37,6 +38,7 @@ export function defineCloudflareConfig(config = {}) {
                 tagCache: resolveTagCache(tagCache),
                 queue: resolveQueue(queue),
             },
+            assetResolver: () => assetResolver,
         },
     };
 }
@@ -71,3 +73,9 @@ function resolveCdnInvalidation(value = "dummy") {
 export function getOpenNextConfig(buildOpts) {
     return buildOpts.config;
 }
+/**
+ * @returns Unique deployment ID
+ */
+export function getDeploymentId() {
+    return `dpl-${new Date().getTime().toString(36)}`;
+}

package/dist/api/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./cloudflare-context.js";
-export { defineCloudflareConfig, type OpenNextConfig } from "./config.js";
+export { defineCloudflareConfig, getDeploymentId, type OpenNextConfig } from "./config.js";

package/dist/api/index.js

@@ -1,2 +1,2 @@
 export * from "./cloudflare-context.js";
-export { defineCloudflareConfig } from "./config.js";
+export { defineCloudflareConfig, getDeploymentId } from "./config.js";

package/dist/api/overrides/asset-resolver/index.d.ts

@@ -0,0 +1,19 @@
+import type { AssetResolver } from "@opennextjs/aws/types/overrides";
+/**
+ * Serves assets when `run_worker_first` is set to true.
+ *
+ * When `run_worker_first` is `false`, the assets are served directly bypassing Next routing.
+ *
+ * When it is `true`, assets are served from the routing layer. It should be used when assets
+ * should be behind the middleware or when skew protection is enabled.
+ *
+ * See https://developers.cloudflare.com/workers/static-assets/binding/#run_worker_first
+ */
+declare const resolver: AssetResolver;
+/**
+ * @param runWorkerFirst `run_worker_first` config
+ * @param pathname pathname of the request
+ * @returns Whether the user worker runs first
+ */
+export declare function isUserWorkerFirst(runWorkerFirst: boolean | string[] | undefined, pathname: string): boolean;
+export default resolver;

package/dist/api/overrides/asset-resolver/index.js

@@ -0,0 +1,78 @@
+import { getCloudflareContext } from "../../cloudflare-context.js";
+/**
+ * Serves assets when `run_worker_first` is set to true.
+ *
+ * When `run_worker_first` is `false`, the assets are served directly bypassing Next routing.
+ *
+ * When it is `true`, assets are served from the routing layer. It should be used when assets
+ * should be behind the middleware or when skew protection is enabled.
+ *
+ * See https://developers.cloudflare.com/workers/static-assets/binding/#run_worker_first
+ */
+const resolver = {
+    name: "cloudflare-asset-resolver",
+    async maybeGetAssetResult(event) {
+        const { ASSETS } = getCloudflareContext().env;
+        if (!ASSETS || !isUserWorkerFirst(globalThis.__ASSETS_RUN_WORKER_FIRST__, event.rawPath)) {
+            // Only handle assets when the user worker runs first for the path
+            return undefined;
+        }
+        const { method, headers } = event;
+        if (method !== "GET" && method != "HEAD") {
+            return undefined;
+        }
+        const url = new URL(event.rawPath, "https://assets.local");
+        const response = await ASSETS.fetch(url, {
+            headers,
+            method,
+        });
+        if (response.status === 404) {
+            return undefined;
+        }
+        return {
+            type: "core",
+            statusCode: response.status,
+            headers: Object.fromEntries(response.headers.entries()),
+            // Workers and Node types differ.
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            body: response.body || new ReadableStream(),
+            isBase64Encoded: false,
+        };
+    },
+};
+/**
+ * @param runWorkerFirst `run_worker_first` config
+ * @param pathname pathname of the request
+ * @returns Whether the user worker runs first
+ */
+export function isUserWorkerFirst(runWorkerFirst, pathname) {
+    if (!Array.isArray(runWorkerFirst)) {
+        return runWorkerFirst ?? false;
+    }
+    let hasPositiveMatch = false;
+    for (let rule of runWorkerFirst) {
+        let isPositiveRule = true;
+        if (rule.startsWith("!")) {
+            rule = rule.slice(1);
+            isPositiveRule = false;
+        }
+        else if (hasPositiveMatch) {
+            // Do not look for more positive rules once we have a match
+            continue;
+        }
+        // - Escapes special characters
+        // - Replaces * with .*
+        const match = new RegExp(`^${rule.replace(/([[\]().*+?^$|{}\\])/g, "\\$1").replace("\\*", ".*")}$`).test(pathname);
+        if (match) {
+            if (isPositiveRule) {
+                hasPositiveMatch = true;
+            }
+            else {
+                // Exit early when there is a negative match
+                return false;
+            }
+        }
+    }
+    return hasPositiveMatch;
+}
+export default resolver;

package/dist/cli/build/build.d.ts

@@ -1,4 +1,5 @@
 import * as buildHelper from "@opennextjs/aws/build/helper.js";
+import type { Unstable_Config } from "wrangler";
 import { OpenNextConfig } from "../../api/config.js";
 import type { ProjectOptions } from "../project-options.js";
 /**
@@ -10,4 +11,4 @@ import type { ProjectOptions } from "../project-options.js";
  * @param config The OpenNext config
  * @param projectOpts The options for the project
  */
-export declare function build(options: buildHelper.BuildOptions, config: OpenNextConfig, projectOpts: ProjectOptions): Promise<void>;
+export declare function build(options: buildHelper.BuildOptions, config: OpenNextConfig, projectOpts: ProjectOptions, wranglerConfig: Unstable_Config): Promise<void>;

package/dist/cli/build/build.js

@@ -10,6 +10,7 @@ import { compileCacheAssetsManifestSqlFile } from "./open-next/compile-cache-ass
 import { compileEnvFiles } from "./open-next/compile-env-files.js";
 import { compileImages } from "./open-next/compile-images.js";
 import { compileInit } from "./open-next/compile-init.js";
+import { compileSkewProtection } from "./open-next/compile-skew-protection.js";
 import { compileDurableObjects } from "./open-next/compileDurableObjects.js";
 import { createServerBundle } from "./open-next/createServerBundle.js";
 import { createWranglerConfigIfNotExistent } from "./utils/index.js";
@@ -23,9 +24,8 @@ import { getVersion } from "./utils/version.js";
  * @param config The OpenNext config
  * @param projectOpts The options for the project
  */
-export async function build(options, config, projectOpts) {
+export async function build(options, config, projectOpts, wranglerConfig) {
     // Do not minify the code so that we can apply string replacement patch.
-    // Note that wrangler will still minify the bundle.
     options.minify = false;
     // Pre-build validation
     buildHelper.checkRunningInsideNextjsApp(options);
@@ -47,14 +47,11 @@ export async function build(options, config, projectOpts) {
     // Generate deployable bundle
     printHeader("Generating bundle");
     buildHelper.initOutputDir(options);
-    // Compile cache.ts
     compileCache(options);
-    // Compile .env files
     compileEnvFiles(options);
-    // Compile workerd init
-    compileInit(options);
-    // Compile image helpers
+    compileInit(options, wranglerConfig);
     compileImages(options);
+    compileSkewProtection(options, config);
     // Compile middleware
     await createMiddleware(options, { forceOnlyBuildOnce: true });
     createStaticAssets(options, { useBasePath: true });

package/dist/cli/build/open-next/compile-images.js

@@ -13,6 +13,11 @@ export async function compileImages(options) {
     const imagesManifest = fs.existsSync(imagesManifestPath)
         ? JSON.parse(fs.readFileSync(imagesManifestPath, { encoding: "utf-8" }))
         : {};
+    const __IMAGES_REMOTE_PATTERNS__ = JSON.stringify(imagesManifest?.images?.remotePatterns ?? []);
+    const __IMAGES_LOCAL_PATTERNS__ = JSON.stringify(imagesManifest?.images?.localPatterns ?? []);
+    const __IMAGES_ALLOW_SVG__ = JSON.stringify(Boolean(imagesManifest?.images?.dangerouslyAllowSVG));
+    const __IMAGES_CONTENT_SECURITY_POLICY__ = JSON.stringify(imagesManifest?.images?.contentSecurityPolicy ?? "script-src 'none'; frame-src 'none'; sandbox;");
+    const __IMAGES_CONTENT_DISPOSITION__ = JSON.stringify(imagesManifest?.images?.contentDispositionType ?? "attachment");
     await build({
         entryPoints: [imagesPath],
         outdir: path.join(options.outputDir, "cloudflare"),
@@ -22,8 +27,11 @@ export async function compileImages(options) {
         target: "esnext",
         platform: "node",
         define: {
-            __IMAGES_REMOTE_PATTERNS__: JSON.stringify(imagesManifest?.images?.remotePatterns ?? []),
-            __IMAGES_LOCAL_PATTERNS__: JSON.stringify(imagesManifest?.images?.localPatterns ?? []),
+            __IMAGES_REMOTE_PATTERNS__,
+            __IMAGES_LOCAL_PATTERNS__,
+            __IMAGES_ALLOW_SVG__,
+            __IMAGES_CONTENT_SECURITY_POLICY__,
+            __IMAGES_CONTENT_DISPOSITION__,
         },
     });
 }

package/dist/cli/build/open-next/compile-init.d.ts

@@ -1,5 +1,6 @@
 import type { BuildOptions } from "@opennextjs/aws/build/helper.js";
+import type { Unstable_Config } from "wrangler";
 /**
  * Compiles the initialization code for the workerd runtime
  */
-export declare function compileInit(options: BuildOptions): Promise<void>;
+export declare function compileInit(options: BuildOptions, wranglerConfig: Unstable_Config): Promise<void>;

package/dist/cli/build/open-next/compile-init.js

@@ -5,12 +5,13 @@ import { build } from "esbuild";
 /**
  * Compiles the initialization code for the workerd runtime
  */
-export async function compileInit(options) {
+export async function compileInit(options, wranglerConfig) {
     const currentDir = path.join(path.dirname(fileURLToPath(import.meta.url)));
     const templatesDir = path.join(currentDir, "../../templates");
     const initPath = path.join(templatesDir, "init.js");
     const nextConfig = loadConfig(path.join(options.appBuildOutputPath, ".next"));
     const basePath = nextConfig.basePath ?? "";
+    const deploymentId = nextConfig.deploymentId ?? "";
     await build({
         entryPoints: [initPath],
         outdir: path.join(options.outputDir, "cloudflare"),
@@ -22,6 +23,8 @@ export async function compileInit(options) {
         define: {
             __BUILD_TIMESTAMP_MS__: JSON.stringify(Date.now()),
             __NEXT_BASE_PATH__: JSON.stringify(basePath),
+            __ASSETS_RUN_WORKER_FIRST__: JSON.stringify(wranglerConfig.assets?.run_worker_first ?? false),
+            __DEPLOYMENT_ID__: JSON.stringify(deploymentId),
         },
     });
 }

package/dist/cli/build/open-next/compile-skew-protection.d.ts

@@ -0,0 +1,3 @@
+import type { BuildOptions } from "@opennextjs/aws/build/helper.js";
+import type { OpenNextConfig } from "../../../api";
+export declare function compileSkewProtection(options: BuildOptions, config: OpenNextConfig): Promise<void>;

package/dist/cli/build/open-next/compile-skew-protection.js

@@ -0,0 +1,21 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { build } from "esbuild";
+export async function compileSkewProtection(options, config) {
+    const currentDir = path.join(path.dirname(fileURLToPath(import.meta.url)));
+    const templatesDir = path.join(currentDir, "../../templates");
+    const initPath = path.join(templatesDir, "skew-protection.js");
+    const skewProtectionEnabled = config.cloudflare?.skewProtection?.enabled === true;
+    await build({
+        entryPoints: [initPath],
+        outdir: path.join(options.outputDir, "cloudflare"),
+        bundle: false,
+        minify: false,
+        format: "esm",
+        target: "esnext",
+        platform: "node",
+        define: {
+            __SKEW_PROTECTION_ENABLED__: JSON.stringify(skewProtectionEnabled),
+        },
+    });
+}

package/dist/cli/build/open-next/compileDurableObjects.js

@@ -9,10 +9,7 @@ export function compileDurableObjects(buildOpts) {
         _require.resolve("@opennextjs/cloudflare/durable-objects/sharded-tag-cache"),
         _require.resolve("@opennextjs/cloudflare/durable-objects/bucket-cache-purge"),
     ];
-    const { outputDir } = buildOpts;
-    const baseManifestPath = path.join(outputDir, "server-functions/default", getPackagePath(buildOpts), ".next");
-    // We need to change the type in aws
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const baseManifestPath = path.join(buildOpts.outputDir, "server-functions/default", getPackagePath(buildOpts), ".next");
     const prerenderManifest = loadPrerenderManifest(baseManifestPath);
     const previewModeId = prerenderManifest.preview.previewModeId;
     const BUILD_ID = loadBuildId(baseManifestPath);

package/dist/cli/commands/deploy.js

@@ -1,10 +1,26 @@
+import { DEPLOYMENT_MAPPING_ENV_NAME } from "../templates/skew-protection.js";
 import { getWranglerEnvironmentFlag, runWrangler } from "../utils/run-wrangler.js";
+import { getEnvFromPlatformProxy, quoteShellMeta } from "./helpers.js";
 import { populateCache } from "./populate-cache.js";
+import { getDeploymentMapping } from "./skew-protection.js";
 export async function deploy(options, config, deployOptions) {
+    const envVars = await getEnvFromPlatformProxy({
+        // TODO: Pass the configPath, update everywhere applicable
+        environment: getWranglerEnvironmentFlag(deployOptions.passthroughArgs),
+    });
+    const deploymentMapping = await getDeploymentMapping(options, config, envVars);
     await populateCache(options, config, {
         target: "remote",
         environment: getWranglerEnvironmentFlag(deployOptions.passthroughArgs),
         cacheChunkSize: deployOptions.cacheChunkSize,
     });
-    runWrangler(options, ["deploy", ...deployOptions.passthroughArgs], { logging: "all" });
+    runWrangler(options, [
+        "deploy",
+        ...deployOptions.passthroughArgs,
+        ...(deploymentMapping
+            ? [`--var ${DEPLOYMENT_MAPPING_ENV_NAME}:${quoteShellMeta(JSON.stringify(deploymentMapping))}`]
+            : []),
+    ], {
+        logging: "all",
+    });
 }

package/dist/cli/commands/helpers.d.ts

@@ -0,0 +1,20 @@
+import { type GetPlatformProxyOptions } from "wrangler";
+export type WorkerEnvVar = Record<keyof CloudflareEnv, string | undefined>;
+/**
+ * Return the string env vars from the worker.
+ *
+ * @param options Options to pass to `getPlatformProxy`, i.e. to set the environment
+ * @returns the env vars
+ */
+export declare function getEnvFromPlatformProxy(options: GetPlatformProxyOptions): Promise<WorkerEnvVar>;
+/**
+ * Escape shell metacharacters.
+ *
+ * When `spawnSync` is invoked with `shell: true`, metacharacters need to be escaped.
+ *
+ * Based on https://github.com/ljharb/shell-quote/blob/main/quote.js
+ *
+ * @param arg
+ * @returns escaped arg
+ */
+export declare function quoteShellMeta(arg: string): string;

package/dist/cli/commands/helpers.js

@@ -0,0 +1,37 @@
+import { getPlatformProxy } from "wrangler";
+/**
+ * Return the string env vars from the worker.
+ *
+ * @param options Options to pass to `getPlatformProxy`, i.e. to set the environment
+ * @returns the env vars
+ */
+export async function getEnvFromPlatformProxy(options) {
+    const envVars = {};
+    const proxy = await getPlatformProxy(options);
+    Object.entries(proxy.env).forEach(([key, value]) => {
+        if (typeof value === "string") {
+            envVars[key] = value;
+        }
+    });
+    await proxy.dispose();
+    return envVars;
+}
+/**
+ * Escape shell metacharacters.
+ *
+ * When `spawnSync` is invoked with `shell: true`, metacharacters need to be escaped.
+ *
+ * Based on https://github.com/ljharb/shell-quote/blob/main/quote.js
+ *
+ * @param arg
+ * @returns escaped arg
+ */
+export function quoteShellMeta(arg) {
+    if (/["\s]/.test(arg) && !/'/.test(arg)) {
+        return `'${arg.replace(/(['\\])/g, "\\$1")}'`;
+    }
+    if (/["'\s]/.test(arg)) {
+        return `"${arg.replace(/(["\\$`!])/g, "\\$1")}"`;
+    }
+    return arg.replace(/([A-Za-z]:)?([#!"$&'()*,:;<=>?@[\\\]^`{|}])/g, "$1\\$2");
+}

package/dist/cli/commands/populate-cache.js

@@ -3,7 +3,7 @@ import path from "node:path";
 import logger from "@opennextjs/aws/logger.js";
 import { globSync } from "glob";
 import { tqdm } from "ts-tqdm";
-import { getPlatformProxy, unstable_readConfig } from "wrangler";
+import { unstable_readConfig } from "wrangler";
 import { BINDING_NAME as KV_CACHE_BINDING_NAME, NAME as KV_CACHE_NAME, PREFIX_ENV_NAME as KV_CACHE_PREFIX_ENV_NAME, } from "../../api/overrides/incremental-cache/kv-incremental-cache.js";
 import { BINDING_NAME as R2_CACHE_BINDING_NAME, NAME as R2_CACHE_NAME, PREFIX_ENV_NAME as R2_CACHE_PREFIX_ENV_NAME, } from "../../api/overrides/incremental-cache/r2-incremental-cache.js";
 import { CACHE_DIR as STATIC_ASSETS_CACHE_DIR, NAME as STATIC_ASSETS_CACHE_NAME, } from "../../api/overrides/incremental-cache/static-assets-incremental-cache.js";
@@ -11,6 +11,7 @@ import { computeCacheKey } from "../../api/overrides/internal.js";
 import { BINDING_NAME as D1_TAG_BINDING_NAME, NAME as D1_TAG_NAME, } from "../../api/overrides/tag-cache/d1-next-tag-cache.js";
 import { normalizePath } from "../build/utils/normalize-path.js";
 import { runWrangler } from "../utils/run-wrangler.js";
+import { getEnvFromPlatformProxy, quoteShellMeta } from "./helpers.js";
 async function resolveCacheName(value) {
     return typeof value === "function" ? (await value()).name : value;
 }
@@ -50,12 +51,6 @@ export function getCacheAssets(opts) {
     }
     return assets;
 }
-async function getPlatformProxyEnv(options, key) {
-    const proxy = await getPlatformProxy(options);
-    const prefix = proxy.env[key];
-    await proxy.dispose();
-    return prefix;
-}
 async function populateR2IncrementalCache(options, populateCacheOptions) {
     logger.info("\nPopulating R2 incremental cache...");
     const config = unstable_readConfig({ env: populateCacheOptions.environment });
@@ -67,7 +62,8 @@ async function populateR2IncrementalCache(options, populateCacheOptions) {
     if (!bucket) {
         throw new Error(`R2 binding ${JSON.stringify(R2_CACHE_BINDING_NAME)} should have a 'bucket_name'`);
     }
-    const prefix = await getPlatformProxyEnv(populateCacheOptions, R2_CACHE_PREFIX_ENV_NAME);
+    const envVars = await getEnvFromPlatformProxy(populateCacheOptions);
+    const prefix = envVars[R2_CACHE_PREFIX_ENV_NAME];
     const assets = getCacheAssets(options);
     for (const { fullPath, key, buildId, isFetch } of tqdm(assets)) {
         const cacheKey = computeCacheKey(key, {
@@ -93,7 +89,8 @@ async function populateKVIncrementalCache(options, populateCacheOptions) {
     if (!binding) {
         throw new Error(`No KV binding ${JSON.stringify(KV_CACHE_BINDING_NAME)} found!`);
     }
-    const prefix = await getPlatformProxyEnv(populateCacheOptions, KV_CACHE_PREFIX_ENV_NAME);
+    const envVars = await getEnvFromPlatformProxy(populateCacheOptions);
+    const prefix = envVars[KV_CACHE_PREFIX_ENV_NAME];
     const assets = getCacheAssets(options);
     const chunkSize = Math.max(1, populateCacheOptions.cacheChunkSize ?? 25);
     const totalChunks = Math.ceil(assets.length / chunkSize);
@@ -171,22 +168,3 @@ export async function populateCache(options, config, populateCacheOptions) {
         }
     }
 }
-/**
- * Escape shell metacharacters.
- *
- * When `spawnSync` is invoked with `shell: true`, metacharacters need to be escaped.
- *
- * Based on https://github.com/ljharb/shell-quote/blob/main/quote.js
- *
- * @param arg
- * @returns escaped arg
- */
-function quoteShellMeta(arg) {
-    if (/["\s]/.test(arg) && !/'/.test(arg)) {
-        return `'${arg.replace(/(['\\])/g, "\\$1")}'`;
-    }
-    if (/["'\s]/.test(arg)) {
-        return `"${arg.replace(/(["\\$`!])/g, "\\$1")}"`;
-    }
-    return arg.replace(/([A-Za-z]:)?([#!"$&'()*,:;<=>?@[\\\]^`{|}])/g, "$1\\$2");
-}

package/dist/cli/commands/skew-protection.d.ts

@@ -0,0 +1,67 @@
+/**
+ * We need to maintain a mapping of deployment id to worker version for skew protection.
+ *
+ * The mapping is used to request the correct version of the workers when Next attaches a deployment id to a request.
+ *
+ * The mapping is stored in a worker en var:
+ *
+ *   {
+ *      latestDepId: "current",
+ *      depIdx: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
+ *      depIdy: "yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy",
+ *      depIdz: "zzzzzzzz-zzzz-zzzz-zzzz-zzzzzzzzzzzz",
+ *   }
+ *
+ * Note that the latest version is not known at build time as the version id only gets created on deployment.
+ * This is why we use the "current" placeholder.
+ *
+ * When a new version is deployed:
+ * - "current" is replaced with the latest version of the Worker
+ * - a new entry is added for the new deployment id with the "current" version
+ */
+import type { BuildOptions } from "@opennextjs/aws/build/helper.js";
+import { Cloudflare } from "cloudflare";
+import type { OpenNextConfig } from "../../api";
+import type { WorkerEnvVar } from "./helpers.js";
+/**
+ * Compute the deployment mapping for a deployment.
+ *
+ * @param options Build options
+ * @param config OpenNext config
+ * @param envVars Environment variables
+ * @returns Deployment mapping or undefined
+ */
+export declare function getDeploymentMapping(options: BuildOptions, config: OpenNextConfig, envVars: WorkerEnvVar): Promise<Record<string, string> | undefined>;
+/**
+ * Update an existing deployment mapping:
+ * - Replace the "current" version with the latest deployed version
+ * - Add a "current" version for the current deployment ID
+ * - Remove versions that are not passed in
+ *
+ * @param mapping Existing mapping
+ * @param versions Versions ordered by descending time
+ * @param deploymentId Deployment ID
+ * @returns The updated mapping
+ */
+export declare function updateDeploymentMapping(mapping: Record<string, string>, versions: {
+    id: string;
+}[], deploymentId: string): Record<string, string>;
+/**
+ * Retrieve the versions for the script
+ *
+ * @param scriptName The name of the worker script
+ * @param options.client A Cloudflare API client
+ * @param options.accountId The Cloudflare account id
+ * @param options.afterTimeMs Only list version more recent than this time - default to 7 days
+ * @param options.maxNumberOfVersions The maximum number of version to return - default to 20 versions.
+ * @returns A list of id and creation date ordered by descending creation date
+ */
+export declare function listWorkerVersions(scriptName: string, options: {
+    client: Cloudflare;
+    accountId: string;
+    afterTimeMs?: number;
+    maxNumberOfVersions?: number;
+}): Promise<{
+    id: string;
+    createdOnMs: number;
+}[]>;

package/dist/cli/commands/skew-protection.js

@@ -0,0 +1,193 @@
+/**
+ * We need to maintain a mapping of deployment id to worker version for skew protection.
+ *
+ * The mapping is used to request the correct version of the workers when Next attaches a deployment id to a request.
+ *
+ * The mapping is stored in a worker en var:
+ *
+ *   {
+ *      latestDepId: "current",
+ *      depIdx: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
+ *      depIdy: "yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy",
+ *      depIdz: "zzzzzzzz-zzzz-zzzz-zzzz-zzzzzzzzzzzz",
+ *   }
+ *
+ * Note that the latest version is not known at build time as the version id only gets created on deployment.
+ * This is why we use the "current" placeholder.
+ *
+ * When a new version is deployed:
+ * - "current" is replaced with the latest version of the Worker
+ * - a new entry is added for the new deployment id with the "current" version
+ */
+// re-enable when types are fixed in the cloudflare lib
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import path from "node:path";
+import { loadConfig } from "@opennextjs/aws/adapters/config/util.js";
+import logger from "@opennextjs/aws/logger.js";
+import { Cloudflare, NotFoundError } from "cloudflare";
+import { CURRENT_VERSION_ID, DEPLOYMENT_MAPPING_ENV_NAME } from "../templates/skew-protection.js";
+/** Maximum number of versions to list */
+const MAX_NUMBER_OF_VERSIONS = 20;
+/** Maximum age of versions to list */
+const MAX_VERSION_AGE_DAYS = 7;
+const MS_PER_DAY = 24 * 3600 * 1000;
+/**
+ * Compute the deployment mapping for a deployment.
+ *
+ * @param options Build options
+ * @param config OpenNext config
+ * @param envVars Environment variables
+ * @returns Deployment mapping or undefined
+ */
+export async function getDeploymentMapping(options, config, envVars) {
+    if (config.cloudflare?.skewProtection?.enabled !== true) {
+        return undefined;
+    }
+    const nextConfig = loadConfig(path.join(options.appBuildOutputPath, ".next"));
+    const deploymentId = nextConfig.deploymentId;
+    if (!deploymentId) {
+        logger.error("Deployment ID should be set in the Next config when skew protection is enabled");
+        process.exit(1);
+    }
+    if (!envVars.CF_WORKER_NAME) {
+        logger.error("CF_WORKER_NAME should be set when skew protection is enabled");
+        process.exit(1);
+    }
+    if (!envVars.CF_PREVIEW_DOMAIN) {
+        logger.error("CF_PREVIEW_DOMAIN should be set when skew protection is enabled");
+        process.exit(1);
+    }
+    if (!envVars.CF_WORKERS_SCRIPTS_API_TOKEN) {
+        logger.error("CF_WORKERS_SCRIPTS_API_TOKEN should be set when skew protection is enabled");
+        process.exit(1);
+    }
+    if (!envVars.CF_ACCOUNT_ID) {
+        logger.error("CF_ACCOUNT_ID should be set when skew protection is enabled");
+        process.exit(1);
+    }
+    const apiToken = envVars.CF_WORKERS_SCRIPTS_API_TOKEN;
+    const accountId = envVars.CF_ACCOUNT_ID;
+    const client = new Cloudflare({ apiToken });
+    const scriptName = envVars.CF_WORKER_NAME;
+    const deployedVersions = await listWorkerVersions(scriptName, {
+        client,
+        accountId,
+        maxNumberOfVersions: config.cloudflare?.skewProtection?.maxNumberOfVersions,
+        afterTimeMs: config.cloudflare?.skewProtection?.maxVersionAgeDays
+            ? Date.now() - config.cloudflare?.skewProtection?.maxVersionAgeDays * MS_PER_DAY
+            : undefined,
+    });
+    const existingMapping = deployedVersions.length === 0
+        ? {}
+        : await getExistingDeploymentMapping(scriptName, deployedVersions[0].id, {
+            client,
+            accountId,
+        });
+    if (deploymentId in existingMapping) {
+        logger.error(`The deploymentId "${deploymentId}" has been used previously, update your next config and rebuild`);
+        process.exit(1);
+    }
+    const mapping = updateDeploymentMapping(existingMapping, deployedVersions, deploymentId);
+    return mapping;
+}
+/**
+ * Update an existing deployment mapping:
+ * - Replace the "current" version with the latest deployed version
+ * - Add a "current" version for the current deployment ID
+ * - Remove versions that are not passed in
+ *
+ * @param mapping Existing mapping
+ * @param versions Versions ordered by descending time
+ * @param deploymentId Deployment ID
+ * @returns The updated mapping
+ */
+export function updateDeploymentMapping(mapping, versions, deploymentId) {
+    const newMapping = { [deploymentId]: CURRENT_VERSION_ID };
+    const versionIds = new Set(versions.map((v) => v.id));
+    for (const [deployment, version] of Object.entries(mapping)) {
+        if (version === CURRENT_VERSION_ID && versions.length > 0) {
+            newMapping[deployment] = versions[0].id;
+        }
+        else if (versionIds.has(version)) {
+            newMapping[deployment] = version;
+        }
+    }
+    return newMapping;
+}
+/**
+ * Retrieve the deployment mapping from the last deployed worker.
+ *
+ * NOTE: it is retrieved from the DEPLOYMENT_MAPPING_ENV_NAME env var.
+ *
+ * @param scriptName The name of the worker script
+ * @param versionId The version Id to retrieve
+ * @param options.client A Cloudflare API client
+ * @param options.accountId The Cloudflare account id
+ * @returns The deployment mapping
+ */
+async function getExistingDeploymentMapping(scriptName, versionId, options) {
+    // See https://github.com/cloudflare/cloudflare-typescript/issues/2652
+    const bindings = (await getVersionDetail(scriptName, versionId, options)).resources.bindings ?? [];
+    for (const binding of bindings) {
+        if (binding.name === DEPLOYMENT_MAPPING_ENV_NAME && binding.type == "plain_text") {
+            return JSON.parse(binding.text);
+        }
+    }
+    return {};
+}
+/**
+ * Retrieve the details of the version of a script
+ *
+ * @param scriptName The name of the worker script
+ * @param versionId The version Id to retrieve
+ * @param options.client A Cloudflare API client
+ * @param options.accountId The Cloudflare account id
+
+ * @returns the version information
+ */
+async function getVersionDetail(scriptName, versionId, options) {
+    const { client, accountId } = options;
+    return await client.workers.scripts.versions.get(scriptName, versionId, {
+        account_id: accountId,
+    });
+}
+/**
+ * Retrieve the versions for the script
+ *
+ * @param scriptName The name of the worker script
+ * @param options.client A Cloudflare API client
+ * @param options.accountId The Cloudflare account id
+ * @param options.afterTimeMs Only list version more recent than this time - default to 7 days
+ * @param options.maxNumberOfVersions The maximum number of version to return - default to 20 versions.
+ * @returns A list of id and creation date ordered by descending creation date
+ */
+export async function listWorkerVersions(scriptName, options) {
+    const versions = [];
+    const { client, accountId, afterTimeMs = new Date().getTime() - MAX_VERSION_AGE_DAYS * 24 * 3600 * 1000, maxNumberOfVersions = MAX_NUMBER_OF_VERSIONS, } = options;
+    try {
+        for await (const version of client.workers.scripts.versions.list(scriptName, {
+            account_id: accountId,
+        })) {
+            const id = version.id;
+            const createdOn = version.metadata?.created_on;
+            if (id && createdOn) {
+                const createdOnMs = new Date(createdOn).getTime();
+                if (createdOnMs < afterTimeMs) {
+                    break;
+                }
+                versions.push({ id, createdOnMs });
+                if (versions.length >= maxNumberOfVersions) {
+                    break;
+                }
+            }
+        }
+    }
+    catch (e) {
+        if (e instanceof NotFoundError && e.status === 404) {
+            // The worker has not been deployed before, no previous versions.
+            return [];
+        }
+        throw e;
+    }
+    return versions.sort((a, b) => b.createdOnMs - a.createdOnMs);
+}

package/dist/cli/commands/upload.js

@@ -1,10 +1,24 @@
+import { DEPLOYMENT_MAPPING_ENV_NAME } from "../templates/skew-protection.js";
 import { getWranglerEnvironmentFlag, runWrangler } from "../utils/run-wrangler.js";
+import { getEnvFromPlatformProxy, quoteShellMeta } from "./helpers.js";
 import { populateCache } from "./populate-cache.js";
+import { getDeploymentMapping } from "./skew-protection.js";
 export async function upload(options, config, uploadOptions) {
+    const envVars = await getEnvFromPlatformProxy({
+        // TODO: Pass the configPath, update everywhere applicable
+        environment: getWranglerEnvironmentFlag(uploadOptions.passthroughArgs),
+    });
+    const deploymentMapping = await getDeploymentMapping(options, config, envVars);
     await populateCache(options, config, {
         target: "remote",
         environment: getWranglerEnvironmentFlag(uploadOptions.passthroughArgs),
         cacheChunkSize: uploadOptions.cacheChunkSize,
     });
-    runWrangler(options, ["versions upload", ...uploadOptions.passthroughArgs], { logging: "all" });
+    runWrangler(options, [
+        "versions upload",
+        ...uploadOptions.passthroughArgs,
+        ...(deploymentMapping
+            ? [`--var ${DEPLOYMENT_MAPPING_ENV_NAME}:${quoteShellMeta(JSON.stringify(deploymentMapping))}`]
+            : []),
+    ], { logging: "all" });
 }

package/dist/cli/index.js

@@ -5,6 +5,7 @@ import { compileOpenNextConfig } from "@opennextjs/aws/build/compileConfig.js";
 import { normalizeOptions } from "@opennextjs/aws/build/helper.js";
 import { printHeader, showWarningOnWindows } from "@opennextjs/aws/build/utils.js";
 import logger from "@opennextjs/aws/logger.js";
+import { unstable_readConfig } from "wrangler";
 import { getArgs } from "./args.js";
 import { build } from "./build/build.js";
 import { createOpenNextConfigIfNotExistent, ensureCloudflareConfig } from "./build/utils/index.js";
@@ -12,6 +13,7 @@ import { deploy } from "./commands/deploy.js";
 import { populateCache } from "./commands/populate-cache.js";
 import { preview } from "./commands/preview.js";
 import { upload } from "./commands/upload.js";
+import { getWranglerConfigFlag, getWranglerEnvironmentFlag } from "./utils/run-wrangler.js";
 const nextAppDir = process.cwd();
 async function runCommand(args) {
     printHeader(`Cloudflare ${args.command}`);
@@ -19,6 +21,7 @@ async function runCommand(args) {
     const baseDir = nextAppDir;
     const require = createRequire(import.meta.url);
     const openNextDistDir = path.dirname(require.resolve("@opennextjs/aws/index.js"));
+    // TODO: retrieve the compiled version if command != build
     await createOpenNextConfigIfNotExistent(baseDir);
     const { config, buildDir } = await compileOpenNextConfig(baseDir, undefined, {
         compileEdge: true,
@@ -28,8 +31,13 @@ async function runCommand(args) {
     const options = normalizeOptions(config, openNextDistDir, buildDir);
     logger.setLevel(options.debug ? "debug" : "info");
     switch (args.command) {
-        case "build":
-            return build(options, config, { ...args, sourceDir: baseDir });
+        case "build": {
+            const argv = process.argv.slice(2);
+            const wranglerEnv = getWranglerEnvironmentFlag(argv);
+            const wranglerConfigFile = getWranglerConfigFlag(argv);
+            const wranglerConfig = unstable_readConfig({ env: wranglerEnv, config: wranglerConfigFile });
+            return build(options, config, { ...args, sourceDir: baseDir }, wranglerConfig);
+        }
         case "preview":
             return preview(options, config, args);
         case "deploy":

package/dist/cli/templates/images.d.ts

@@ -15,10 +15,22 @@ export type LocalPattern = {
  * Local images (starting with a '/' as fetched using the passed fetcher).
  * Remote images should match the configured remote patterns or a 404 response is returned.
  */
-export declare function fetchImage(fetcher: Fetcher | undefined, imageUrl: string): Response | Promise<Response> | undefined;
+export declare function fetchImage(fetcher: Fetcher | undefined, imageUrl: string, ctx: ExecutionContext): Promise<Response | undefined>;
 export declare function matchRemotePattern(pattern: RemotePattern, url: URL): boolean;
 export declare function matchLocalPattern(pattern: LocalPattern, url: URL): boolean;
+/**
+ * Detects the content type by looking at the first few bytes of a file
+ *
+ * Based on https://github.com/vercel/next.js/blob/72c9635/packages/next/src/server/image-optimizer.ts#L155
+ *
+ * @param buffer The image bytes
+ * @returns a content type of undefined for unsupported content
+ */
+export declare function detectContentType(buffer: Uint8Array): "image/svg+xml" | "image/jpeg" | "image/png" | "image/gif" | "image/webp" | "image/avif" | "image/x-icon" | "image/x-icns" | "image/tiff" | "image/bmp" | undefined;
 declare global {
     var __IMAGES_REMOTE_PATTERNS__: RemotePattern[];
     var __IMAGES_LOCAL_PATTERNS__: LocalPattern[];
+    var __IMAGES_ALLOW_SVG__: boolean;
+    var __IMAGES_CONTENT_SECURITY_POLICY__: string;
+    var __IMAGES_CONTENT_DISPOSITION__: string;
 }

package/dist/cli/templates/images.js

@@ -4,7 +4,7 @@
  * Local images (starting with a '/' as fetched using the passed fetcher).
  * Remote images should match the configured remote patterns or a 404 response is returned.
  */
-export function fetchImage(fetcher, imageUrl) {
+export async function fetchImage(fetcher, imageUrl, ctx) {
     // https://github.com/vercel/next.js/blob/d76f0b1/packages/next/src/server/image-optimizer.ts#L208
     if (!imageUrl || imageUrl.length > 3072 || imageUrl.startsWith("//")) {
         return getUrlErrorResponse();
@@ -46,7 +46,40 @@ export function fetchImage(fetcher, imageUrl) {
     if (!__IMAGES_REMOTE_PATTERNS__.some((p) => matchRemotePattern(p, url))) {
         return getUrlErrorResponse();
     }
-    return fetch(imageUrl, { cf: { cacheEverything: true } });
+    const imgResponse = await fetch(imageUrl, { cf: { cacheEverything: true } });
+    if (!imgResponse.body) {
+        return imgResponse;
+    }
+    const buffer = new ArrayBuffer(32);
+    try {
+        let contentType;
+        // body1 is eventually used for the response
+        // body2 is used to detect the content type
+        const [body1, body2] = imgResponse.body.tee();
+        const reader = body2.getReader({ mode: "byob" });
+        const { value } = await reader.read(new Uint8Array(buffer));
+        // Release resources by calling `reader.cancel()`
+        // `ctx.waitUntil` keeps the runtime running until the promise settles without having to wait here.
+        ctx.waitUntil(reader.cancel());
+        if (value) {
+            contentType = detectContentType(value);
+        }
+        if (contentType && !(contentType === SVG && !__IMAGES_ALLOW_SVG__)) {
+            const headers = new Headers(imgResponse.headers);
+            headers.set("content-type", contentType);
+            headers.set("content-disposition", __IMAGES_CONTENT_DISPOSITION__);
+            headers.set("content-security-policy", __IMAGES_CONTENT_SECURITY_POLICY__);
+            return new Response(body1, { ...imgResponse, headers });
+        }
+        return new Response('"url" parameter is valid but image type is not allowed', {
+            status: 400,
+        });
+    }
+    catch {
+        return new Response('"url" parameter is valid but upstream response is invalid', {
+            status: 400,
+        });
+    }
 }
 export function matchRemotePattern(pattern, url) {
     // https://github.com/vercel/next.js/blob/d76f0b1/packages/next/src/shared/lib/match-remote-pattern.ts
@@ -79,4 +112,57 @@ export function matchLocalPattern(pattern, url) {
 function getUrlErrorResponse() {
     return new Response(`"url" parameter is not allowed`, { status: 400 });
 }
+const AVIF = "image/avif";
+const WEBP = "image/webp";
+const PNG = "image/png";
+const JPEG = "image/jpeg";
+const GIF = "image/gif";
+const SVG = "image/svg+xml";
+const ICO = "image/x-icon";
+const ICNS = "image/x-icns";
+const TIFF = "image/tiff";
+const BMP = "image/bmp";
+/**
+ * Detects the content type by looking at the first few bytes of a file
+ *
+ * Based on https://github.com/vercel/next.js/blob/72c9635/packages/next/src/server/image-optimizer.ts#L155
+ *
+ * @param buffer The image bytes
+ * @returns a content type of undefined for unsupported content
+ */
+export function detectContentType(buffer) {
+    if ([0xff, 0xd8, 0xff].every((b, i) => buffer[i] === b)) {
+        return JPEG;
+    }
+    if ([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a].every((b, i) => buffer[i] === b)) {
+        return PNG;
+    }
+    if ([0x47, 0x49, 0x46, 0x38].every((b, i) => buffer[i] === b)) {
+        return GIF;
+    }
+    if ([0x52, 0x49, 0x46, 0x46, 0, 0, 0, 0, 0x57, 0x45, 0x42, 0x50].every((b, i) => !b || buffer[i] === b)) {
+        return WEBP;
+    }
+    if ([0x3c, 0x3f, 0x78, 0x6d, 0x6c].every((b, i) => buffer[i] === b)) {
+        return SVG;
+    }
+    if ([0x3c, 0x73, 0x76, 0x67].every((b, i) => buffer[i] === b)) {
+        return SVG;
+    }
+    if ([0, 0, 0, 0, 0x66, 0x74, 0x79, 0x70, 0x61, 0x76, 0x69, 0x66].every((b, i) => !b || buffer[i] === b)) {
+        return AVIF;
+    }
+    if ([0x00, 0x00, 0x01, 0x00].every((b, i) => buffer[i] === b)) {
+        return ICO;
+    }
+    if ([0x69, 0x63, 0x6e, 0x73].every((b, i) => buffer[i] === b)) {
+        return ICNS;
+    }
+    if ([0x49, 0x49, 0x2a, 0x00].every((b, i) => buffer[i] === b)) {
+        return TIFF;
+    }
+    if ([0x42, 0x4d].every((b, i) => buffer[i] === b)) {
+        return BMP;
+    }
+}
 /* eslint-enable no-var */

package/dist/cli/templates/init.d.ts

@@ -10,4 +10,6 @@ export declare function runWithCloudflareRequestContext(request: Request, env: C
 declare global {
     var __BUILD_TIMESTAMP_MS__: number;
     var __NEXT_BASE_PATH__: string;
+    var __ASSETS_RUN_WORKER_FIRST__: boolean | string[] | undefined;
+    var __DEPLOYMENT_ID__: string;
 }

package/dist/cli/templates/init.js

@@ -73,8 +73,9 @@ function initRuntime() {
     };
     Object.assign(globalThis, {
         Request: CustomRequest,
-        __BUILD_TIMESTAMP_MS__: __BUILD_TIMESTAMP_MS__,
-        __NEXT_BASE_PATH__: __NEXT_BASE_PATH__,
+        __BUILD_TIMESTAMP_MS__,
+        __NEXT_BASE_PATH__,
+        __ASSETS_RUN_WORKER_FIRST__,
         // The external middleware will use the convertTo function of the `edge` converter
         // by default it will try to fetch the request, but since we are running everything in the same worker
         // we need to use the request as is.
@@ -113,5 +114,9 @@ function populateProcessEnv(url, env) {
      * https://github.com/vercel/next.js/blob/6b1e48080e896e0d44a05fe009cb79d2d3f91774/packages/next/src/server/app-render/action-handler.ts#L307-L316
      */
     process.env.__NEXT_PRIVATE_ORIGIN = url.origin;
+    // `__DEPLOYMENT_ID__` is a string (passed via ESBuild).
+    if (__DEPLOYMENT_ID__) {
+        process.env.DEPLOYMENT_ID = __DEPLOYMENT_ID__;
+    }
 }
 /* eslint-enable no-var */

package/dist/cli/templates/skew-protection.d.ts

@@ -0,0 +1,28 @@
+/** Name of the env var containing the mapping */
+export declare const DEPLOYMENT_MAPPING_ENV_NAME = "CF_DEPLOYMENT_MAPPING";
+/** Version used for the latest worker */
+export declare const CURRENT_VERSION_ID = "current";
+/**
+ * Routes the request to the requested deployment.
+ *
+ * A specific deployment can be requested via:
+ * - the `dpl` search parameter for assets
+ * - the `x-deployment-id` for other requests
+ *
+ * When a specific deployment is requested, we route to that deployment via the preview URLs.
+ * See https://developers.cloudflare.com/workers/configuration/previews/
+ *
+ * When the requested deployment is not supported a 400 response is returned.
+ *
+ * Notes:
+ * - The re-routing is only active for the deployed version of the app (on a custom domain)
+ * - Assets are also handled when `run_worker_first` is enabled.
+ *   See https://developers.cloudflare.com/workers/static-assets/binding/#run_worker_first
+ *
+ * @param request
+ * @returns
+ */
+export declare function maybeGetSkewProtectionResponse(request: Request): Promise<Response> | Response | undefined;
+declare global {
+    var __SKEW_PROTECTION_ENABLED__: boolean;
+}

package/dist/cli/templates/skew-protection.js

@@ -0,0 +1,57 @@
+import process from "node:process";
+/** Name of the env var containing the mapping */
+export const DEPLOYMENT_MAPPING_ENV_NAME = "CF_DEPLOYMENT_MAPPING";
+/** Version used for the latest worker */
+export const CURRENT_VERSION_ID = "current";
+/**
+ * Routes the request to the requested deployment.
+ *
+ * A specific deployment can be requested via:
+ * - the `dpl` search parameter for assets
+ * - the `x-deployment-id` for other requests
+ *
+ * When a specific deployment is requested, we route to that deployment via the preview URLs.
+ * See https://developers.cloudflare.com/workers/configuration/previews/
+ *
+ * When the requested deployment is not supported a 400 response is returned.
+ *
+ * Notes:
+ * - The re-routing is only active for the deployed version of the app (on a custom domain)
+ * - Assets are also handled when `run_worker_first` is enabled.
+ *   See https://developers.cloudflare.com/workers/static-assets/binding/#run_worker_first
+ *
+ * @param request
+ * @returns
+ */
+export function maybeGetSkewProtectionResponse(request) {
+    // no early return as esbuild would not treeshake the code.
+    if (__SKEW_PROTECTION_ENABLED__) {
+        const url = new URL(request.url);
+        // Skew protection is only active for the latest version of the app served on a custom domain.
+        if (url.hostname === "localhost" || url.hostname.endsWith(".workers.dev")) {
+            return undefined;
+        }
+        const requestDeploymentId = request.headers.get("x-deployment-id") ?? url.searchParams.get("dpl");
+        if (!requestDeploymentId || requestDeploymentId === process.env.DEPLOYMENT_ID) {
+            // The request does not specify a deployment id or it is the current deployment id
+            return undefined;
+        }
+        const mapping = process.env[DEPLOYMENT_MAPPING_ENV_NAME]
+            ? JSON.parse(process.env[DEPLOYMENT_MAPPING_ENV_NAME])
+            : {};
+        if (!(requestDeploymentId in mapping)) {
+            // Unknown deployment id, serve the current version
+            return undefined;
+        }
+        const version = mapping[requestDeploymentId];
+        if (!version || version === CURRENT_VERSION_ID) {
+            return undefined;
+        }
+        const versionDomain = version.split("-")[0];
+        const hostname = `${versionDomain}-${process.env.CF_WORKER_NAME}.${process.env.CF_PREVIEW_DOMAIN}.workers.dev`;
+        url.hostname = hostname;
+        const requestToOlderDeployment = new Request(url, request);
+        return fetch(requestToOlderDeployment);
+    }
+}
+/* eslint-enable no-var */

package/dist/cli/templates/worker.js

@@ -2,6 +2,8 @@
 import { fetchImage } from "./cloudflare/images.js";
 //@ts-expect-error: Will be resolved by wrangler build
 import { runWithCloudflareRequestContext } from "./cloudflare/init.js";
+//@ts-expect-error: Will be resolved by wrangler build
+import { maybeGetSkewProtectionResponse } from "./cloudflare/skew-protection.js";
 // @ts-expect-error: Will be resolved by wrangler build
 import { handler as middlewareHandler } from "./middleware/handler.mjs";
 //@ts-expect-error: Will be resolved by wrangler build
@@ -13,6 +15,10 @@ export { BucketCachePurge } from "./.build/durable-objects/bucket-cache-purge.js
 export default {
     async fetch(request, env, ctx) {
         return runWithCloudflareRequestContext(request, env, ctx, async () => {
+            const response = maybeGetSkewProtectionResponse(request);
+            if (response) {
+                return response;
+            }
             const url = new URL(request.url);
             // Serve images in development.
             // Note: "/cdn-cgi/image/..." requests do not reach production workers.
@@ -29,7 +35,7 @@ export default {
             // Fallback for the Next default image loader.
             if (url.pathname === `${globalThis.__NEXT_BASE_PATH__}/_next/image`) {
                 const imageUrl = url.searchParams.get("url") ?? "";
-                return fetchImage(env.ASSETS, imageUrl);
+                return await fetchImage(env.ASSETS, imageUrl, ctx);
             }
             // - `Request`s are handled by the Next server
             const reqOrResp = await middlewareHandler(request, env, ctx);

package/dist/cli/utils/run-wrangler.d.ts

@@ -7,11 +7,28 @@ type WranglerOptions = {
 };
 export declare function runWrangler(options: BuildOptions, args: string[], wranglerOpts?: WranglerOptions): void;
 export declare function isWranglerTarget(v: string | undefined): v is WranglerTarget;
+/**
+ * Returns the value of the flag.
+ *
+ * The value is retrieved for `<argName> value` or `<argName>=value`.
+ *
+ * @param args List of args
+ * @param argName The arg name with leading dashes, i.e. `--env` or `-e`
+ * @returns The value or undefined when not found
+ */
+export declare function getFlagValue(args: string[], ...argNames: string[]): string | undefined;
 /**
  * Find the value of the environment flag (`--env` / `-e`) used by Wrangler.
  *
  * @param args - CLI arguments.
- * @returns Value of the environment flag.
+ * @returns Value of the environment flag or undefined when not found
  */
 export declare function getWranglerEnvironmentFlag(args: string[]): string | undefined;
+/**
+ * Find the value of the config flag (`--config` / `-c`) used by Wrangler.
+ *
+ * @param args - CLI arguments.
+ * @returns Value of the config flag or undefined when not found
+ */
+export declare function getWranglerConfigFlag(args: string[]): string | undefined;
 export {};

package/dist/cli/utils/run-wrangler.js

@@ -62,22 +62,49 @@ export function runWrangler(options, args, wranglerOpts = {}) {
 export function isWranglerTarget(v) {
     return !!v && ["local", "remote"].includes(v);
 }
+/**
+ * Returns the value of the flag.
+ *
+ * The value is retrieved for `<argName> value` or `<argName>=value`.
+ *
+ * @param args List of args
+ * @param argName The arg name with leading dashes, i.e. `--env` or `-e`
+ * @returns The value or undefined when not found
+ */
+export function getFlagValue(args, ...argNames) {
+    if (argNames.some((name) => !name.startsWith("-"))) {
+        // Names should start with "-" or "--"
+        throw new Error(`Invalid arg names: ${argNames}`);
+    }
+    for (const argName of argNames) {
+        for (let i = 0; i <= args.length; i++) {
+            const arg = args[i];
+            if (!arg)
+                continue;
+            if (arg === argName) {
+                return args[i + 1];
+            }
+            if (arg.startsWith(argName)) {
+                return arg.split("=")[1];
+            }
+        }
+    }
+}
 /**
  * Find the value of the environment flag (`--env` / `-e`) used by Wrangler.
  *
  * @param args - CLI arguments.
- * @returns Value of the environment flag.
+ * @returns Value of the environment flag or undefined when not found
  */
 export function getWranglerEnvironmentFlag(args) {
-    for (let i = 0; i <= args.length; i++) {
-        const arg = args[i];
-        if (!arg)
-            continue;
-        if (arg === "--env" || arg === "-e") {
-            return args[i + 1];
-        }
-        if (arg.startsWith("--env=") || arg.startsWith("-e=")) {
-            return arg.split("=")[1];
-        }
-    }
+    return getFlagValue(args, "--env", "-e");
+}
+/**
+ * Find the value of the config flag (`--config` / `-c`) used by Wrangler.
+ *
+ * @param args - CLI arguments.
+ * @returns Value of the config flag or undefined when not found
+ */
+export function getWranglerConfigFlag(args) {
+    return getFlagValue(args, "--config", "-c");
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opennextjs/cloudflare",
   "description": "Cloudflare builder for next apps",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "type": "module",
   "bin": {
     "opennextjs-cloudflare": "dist/cli/index.js"
@@ -55,6 +55,7 @@
     "@types/mock-fs": "^4.13.4",
     "@types/node": "^22.2.0",
     "@types/picomatch": "^4.0.0",
+    "cloudflare": "^4.4.1",
     "diff": "^8.0.2",
     "esbuild": "^0.25.4",
     "eslint": "^9.11.1",
@@ -71,7 +72,7 @@
     "vitest": "^2.1.1"
   },
   "peerDependencies": {
-    "wrangler": "^4.19.1"
+    "wrangler": "^4.23.0"
   },
   "scripts": {
     "clean": "rimraf dist",