@opennextjs/cloudflare 1.16.6 → 1.17.1

package/dist/cli/commands/{utils.d.ts → utils/utils.d.ts}

@@ -1,6 +1,5 @@
-import * as buildHelper from "@opennextjs/aws/build/helper.js";
 import type yargs from "yargs";
-import type { OpenNextConfig } from "../../api/config.js";
+import type { OpenNextConfig } from "../../../api/config.js";
 export type WithWranglerArgs<T = unknown> = T & {
     wranglerArgs: string[];
     wranglerConfigPath: string | undefined;
@@ -13,15 +12,6 @@ export declare const nextAppDir: string;
  * @param command
  */
 export declare function printHeaders(command: string): void;
-/**
- * Validates that the Next.js version is supported and checks wrangler compatibility.
- *
- * Note: this function assumes that wrangler is installed.
- *
- * @param options.nextVersion The detected Next.js version string
- * @throws {Error} If the Next.js version is unsupported
- */
-export declare function ensureNextjsVersionSupported({ nextVersion, }: Pick<buildHelper.BuildOptions, "nextVersion">): Promise<void>;
 /**
  * Compile the OpenNext config.
  *
@@ -30,8 +20,12 @@ export declare function ensureNextjsVersionSupported({ nextVersion, }: Pick<buil
  *
  * When users specify a custom config file but it doesn't exist, we throw an Error.
  *
+ * @throws If a custom config path is provided but the file does not exist.
+ * @throws If no config file is found and the user declines to create one.
+ *
  * @param configPath Optional path to the config file. Absolute or relative to cwd.
- * @returns OpenNext config.
+ * @returns The compiled OpenNext config and the build directory.
+ *
  */
 export declare function compileConfig(configPath: string | undefined): Promise<{
     config: import("@opennextjs/aws/types/open-next.js").OpenNextConfig;

package/dist/cli/commands/{utils.js → utils/utils.js}

@@ -4,11 +4,12 @@ import path from "node:path";
 import url from "node:url";
 import { compileOpenNextConfig } from "@opennextjs/aws/build/compileConfig.js";
 import { normalizeOptions } from "@opennextjs/aws/build/helper.js";
-import * as buildHelper 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 { createOpenNextConfigIfNotExistent, ensureCloudflareConfig } from "../build/utils/index.js";
+import { ensureCloudflareConfig } from "../../build/utils/ensure-cf-config.js";
+import { askConfirmation } from "../../utils/ask-confirmation.js";
+import { createOpenNextConfigFile, findOpenNextConfig } from "../../utils/create-open-next-config.js";
 export const nextAppDir = process.cwd();
 /**
  * Print headers and warnings for the CLI.
@@ -19,28 +20,6 @@ export function printHeaders(command) {
     printHeader(`Cloudflare ${command}`);
     showWarningOnWindows();
 }
-/**
- * Validates that the Next.js version is supported and checks wrangler compatibility.
- *
- * Note: this function assumes that wrangler is installed.
- *
- * @param options.nextVersion The detected Next.js version string
- * @throws {Error} If the Next.js version is unsupported
- */
-export async function ensureNextjsVersionSupported({ nextVersion, }) {
-    if (buildHelper.compareSemver(nextVersion, "<", "14.2.0")) {
-        throw new Error("Next.js version unsupported, please upgrade to version 14.2 or greater.");
-    }
-    const { default: { version: wranglerVersion }, } = await import("wrangler/package.json", { with: { type: "json" } });
-    // We need a version of workerd that has a fix for setImmediate for Next.js 16.1+
-    // See:
-    // - https://github.com/cloudflare/workerd/pull/5869
-    // - https://github.com/opennextjs/opennextjs-cloudflare/issues/1049
-    if (buildHelper.compareSemver(nextVersion, ">=", "16.1.0") &&
-        buildHelper.compareSemver(wranglerVersion, "<", "4.59.2")) {
-        logger.warn(`Next.js 16.1+ requires wrangler 4.59.2 or greater (${wranglerVersion} detected).`);
-    }
-}
 /**
  * Compile the OpenNext config.
  *
@@ -49,15 +28,24 @@ export async function ensureNextjsVersionSupported({ nextVersion, }) {
  *
  * When users specify a custom config file but it doesn't exist, we throw an Error.
  *
+ * @throws If a custom config path is provided but the file does not exist.
+ * @throws If no config file is found and the user declines to create one.
+ *
  * @param configPath Optional path to the config file. Absolute or relative to cwd.
- * @returns OpenNext config.
+ * @returns The compiled OpenNext config and the build directory.
+ *
  */
 export async function compileConfig(configPath) {
     if (configPath && !existsSync(configPath)) {
         throw new Error(`Custom config file not found at ${configPath}`);
     }
+    configPath ??= findOpenNextConfig(nextAppDir);
     if (!configPath) {
-        configPath = await createOpenNextConfigIfNotExistent(nextAppDir);
+        const answer = await askConfirmation("Missing required `open-next.config.ts` file, do you want to create one?");
+        if (!answer) {
+            throw new Error("The `open-next.config.ts` file is required, aborting!");
+        }
+        configPath = createOpenNextConfigFile(nextAppDir, { cache: false });
     }
     const { config, buildDir } = await compileOpenNextConfig(configPath, { compileEdge: true });
     ensureCloudflareConfig(config);

package/dist/cli/project-options.d.ts

@@ -1,4 +1,4 @@
-import type { WranglerTarget } from "./utils/run-wrangler.js";
+import type { WranglerTarget } from "./commands/utils/run-wrangler.js";
 export type ProjectOptions = {
     sourceDir: string;
     skipNextBuild: boolean;

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

@@ -22,7 +22,37 @@ export type LocalPattern = {
  * @returns A promise that resolves to the resolved request.
  */
 export declare function handleImageRequest(requestURL: URL, requestHeaders: Headers, env: CloudflareEnv): Promise<Response>;
+/**
+ * Handles requests to /cdn-cgi/image/ in development.
+ *
+ * Extracts the image URL, fetches the image, and checks the content type against
+ * Cloudflare's supported input formats.
+ *
+ * @param requestURL The full request URL.
+ * @param env The Cloudflare environment bindings.
+ * @returns A promise that resolves to the image response.
+ */
+export declare function handleCdnCgiImageRequest(requestURL: URL, env: CloudflareEnv): Promise<Response>;
+/**
+ * Parses a /cdn-cgi/image/ request URL.
+ *
+ * Extracts the image URL from the `/cdn-cgi/image/<options>/<image-url>` path format.
+ * Rejects protocol-relative URLs (`//...`). The cdn-cgi options are not parsed or
+ * validated as they are Cloudflare's concern.
+ *
+ * @param pathname The URL pathname (e.g. `/cdn-cgi/image/width=640,quality=75,format=auto/path/to/image.png`).
+ * @returns the parsed URL result or an error.
+ */
+export declare function parseCdnCgiImageRequest(pathname: string): {
+    ok: true;
+    url: string;
+    static: boolean;
+} | ErrorResult;
 export type OptimizedImageFormat = "image/avif" | "image/webp";
+type ErrorResult = {
+    ok: false;
+    message: string;
+};
 export declare function matchLocalPattern(pattern: LocalPattern, url: {
     pathname: string;
     search: string;

package/dist/cli/templates/images.js

@@ -68,19 +68,11 @@ export async function handleImageRequest(requestURL, requestHeaders, env) {
             immutable = cacheControlHeader.includes("immutable");
         }
     }
-    const [contentTypeImageStream, imageStream] = imageResponse.body.tee();
-    const imageHeaderBytes = new Uint8Array(32);
-    const contentTypeImageReader = contentTypeImageStream.getReader({
-        mode: "byob",
-    });
-    const readImageHeaderBytesResult = await contentTypeImageReader.readAtLeast(32, imageHeaderBytes);
-    if (readImageHeaderBytesResult.value === undefined) {
-        await imageResponse.body.cancel();
-        return new Response('"url" parameter is valid but upstream response is invalid', {
-            status: 400,
-        });
+    const readHeaderResult = await readImageHeader(imageResponse);
+    if (readHeaderResult instanceof Response) {
+        return readHeaderResult;
     }
-    const contentType = detectImageContentType(readImageHeaderBytesResult.value);
+    const { contentType, imageStream } = readHeaderResult;
     if (contentType === null) {
         warn(`Failed to detect content type of "${parseResult.url}"`);
         return new Response('"url" parameter is valid but image type is not allowed', {
@@ -153,6 +145,123 @@ export async function handleImageRequest(requestURL, requestHeaders, env) {
     });
     return response;
 }
+/**
+ * Handles requests to /cdn-cgi/image/ in development.
+ *
+ * Extracts the image URL, fetches the image, and checks the content type against
+ * Cloudflare's supported input formats.
+ *
+ * @param requestURL The full request URL.
+ * @param env The Cloudflare environment bindings.
+ * @returns A promise that resolves to the image response.
+ */
+export async function handleCdnCgiImageRequest(requestURL, env) {
+    const parseResult = parseCdnCgiImageRequest(requestURL.pathname);
+    if (!parseResult.ok) {
+        return new Response(parseResult.message, {
+            status: 400,
+        });
+    }
+    let imageResponse;
+    if (parseResult.url.startsWith("/")) {
+        if (env.ASSETS === undefined) {
+            return new Response("env.ASSETS binding is not defined", {
+                status: 404,
+            });
+        }
+        const absoluteURL = new URL(parseResult.url, requestURL);
+        imageResponse = await env.ASSETS.fetch(absoluteURL);
+    }
+    else {
+        imageResponse = await fetch(parseResult.url);
+    }
+    if (!imageResponse.ok || imageResponse.body === null) {
+        return new Response('"url" parameter is valid but upstream response is invalid', {
+            status: imageResponse.status,
+        });
+    }
+    const readHeaderResult = await readImageHeader(imageResponse);
+    if (readHeaderResult instanceof Response) {
+        return readHeaderResult;
+    }
+    const { contentType, imageStream } = readHeaderResult;
+    if (contentType === null || !SUPPORTED_CDN_CGI_INPUT_TYPES.has(contentType)) {
+        return new Response('"url" parameter is valid but image type is not allowed', {
+            status: 400,
+        });
+    }
+    if (contentType === SVG && !__IMAGES_ALLOW_SVG__) {
+        return new Response('"url" parameter is valid but image type is not allowed', {
+            status: 400,
+        });
+    }
+    return new Response(imageStream, {
+        headers: { "Content-Type": contentType },
+    });
+}
+/**
+ * Parses a /cdn-cgi/image/ request URL.
+ *
+ * Extracts the image URL from the `/cdn-cgi/image/<options>/<image-url>` path format.
+ * Rejects protocol-relative URLs (`//...`). The cdn-cgi options are not parsed or
+ * validated as they are Cloudflare's concern.
+ *
+ * @param pathname The URL pathname (e.g. `/cdn-cgi/image/width=640,quality=75,format=auto/path/to/image.png`).
+ * @returns the parsed URL result or an error.
+ */
+export function parseCdnCgiImageRequest(pathname) {
+    const match = pathname.match(/^\/cdn-cgi\/image\/(?<options>[^/]+)\/(?<url>.+)$/);
+    if (match === null ||
+        // Valid URLs have at least one option
+        !match.groups?.options ||
+        !match.groups?.url) {
+        return { ok: false, message: "Invalid /cdn-cgi/image/ URL format" };
+    }
+    const imageUrl = match.groups.url;
+    // The regex separator consumes one `/`, so if imageUrl starts with `/`
+    // the original URL segment was protocol-relative (`//...`).
+    if (imageUrl.startsWith("/")) {
+        return { ok: false, message: '"url" parameter cannot be a protocol-relative URL (//)' };
+    }
+    // Resolve the image URL: it may be absolute (https://...) or relative.
+    let resolvedUrl;
+    if (imageUrl.match(/^https?:\/\//)) {
+        resolvedUrl = imageUrl;
+    }
+    else {
+        // Relative URLs need a leading slash.
+        resolvedUrl = `/${imageUrl}`;
+    }
+    return {
+        ok: true,
+        url: resolvedUrl,
+        static: false,
+    };
+}
+/**
+ * Reads the first 32 bytes of an image response to detect its content type.
+ *
+ * Tees the response body so the image stream can still be consumed after detection.
+ *
+ * @param imageResponse The image response whose body to read.
+ * @returns The detected content type and image stream, or an error Response if the header bytes
+ *   could not be read.
+ */
+async function readImageHeader(imageResponse) {
+    // Note: imageResponse.body is non-null — callers check before calling.
+    const [contentTypeStream, imageStream] = imageResponse.body.tee();
+    const headerBytes = new Uint8Array(32);
+    const reader = contentTypeStream.getReader({ mode: "byob" });
+    const readResult = await reader.readAtLeast(32, headerBytes);
+    if (readResult.value === undefined) {
+        await imageResponse.body.cancel();
+        return new Response('"url" parameter is valid but upstream response is invalid', {
+            status: 400,
+        });
+    }
+    const contentType = detectImageContentType(readResult.value);
+    return { contentType, imageStream };
+}
 /**
  * Fetch call with max redirects and timeouts.
  *
@@ -268,6 +377,9 @@ function parseImageRequest(requestURL, requestHeaders) {
 /**
  * Validates that there is exactly one "url" query parameter.
  *
+ * Checks length, protocol-relative URLs, local/remote pattern matching, recursion, and protocol.
+ *
+ * @param requestURL The request URL containing the "url" query parameter.
  * @returns the validated URL or an error result.
  */
 function validateUrlQueryParameter(requestURL) {
@@ -287,7 +399,6 @@ function validateUrlQueryParameter(requestURL) {
         };
         return result;
     }
-    // The url parameter value should be a valid URL or a valid relative URL.
     const url = urls[0];
     if (url.length > 3072) {
         const result = {
@@ -515,6 +626,12 @@ const ICO = "image/x-icon";
 const ICNS = "image/x-icns";
 const TIFF = "image/tiff";
 const BMP = "image/bmp";
+/**
+ * Image content types supported as input by Cloudflare's cdn-cgi image transformation.
+ *
+ * @see https://developers.cloudflare.com/images/transform-images/#supported-input-formats
+ */
+const SUPPORTED_CDN_CGI_INPUT_TYPES = new Set([JPEG, PNG, GIF, WEBP, SVG, HEIC]);
 /**
  * Detects the content type by looking at the first few bytes of a file
  *

package/dist/cli/templates/worker.js

@@ -1,5 +1,5 @@
 //@ts-expect-error: Will be resolved by wrangler build
-import { handleImageRequest } from "./cloudflare/images.js";
+import { handleCdnCgiImageRequest, handleImageRequest } 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
@@ -23,14 +23,7 @@ export default {
             // Serve images in development.
             // Note: "/cdn-cgi/image/..." requests do not reach production workers.
             if (url.pathname.startsWith("/cdn-cgi/image/")) {
-                const m = url.pathname.match(/\/cdn-cgi\/image\/.+?\/(?<url>.+)$/);
-                if (m === null) {
-                    return new Response("Not Found!", { status: 404 });
-                }
-                const imageUrl = m.groups.url;
-                return imageUrl.match(/^https?:\/\//)
-                    ? fetch(imageUrl, { cf: { cacheEverything: true } })
-                    : env.ASSETS?.fetch(new URL(`/${imageUrl}`, url));
+                return handleCdnCgiImageRequest(url, env);
             }
             // Fallback for the Next default image loader.
             if (url.pathname ===

package/dist/cli/utils/ask-account-selection.d.ts

@@ -0,0 +1,12 @@
+interface Account {
+    id: string;
+    name: string;
+}
+/**
+ * Prompts the user to select a Cloudflare account from a list via an interactive CLI prompt.
+ *
+ * @param accounts - The list of Cloudflare accounts to choose from.
+ * @returns The ID of the selected account, or `undefined` if no selection was made.
+ */
+export declare function askAccountSelection(accounts: Account[]): Promise<string | undefined>;
+export {};

package/dist/cli/utils/ask-account-selection.js

@@ -0,0 +1,23 @@
+import { randomUUID } from "node:crypto";
+import Enquirer from "enquirer";
+/**
+ * Prompts the user to select a Cloudflare account from a list via an interactive CLI prompt.
+ *
+ * @param accounts - The list of Cloudflare accounts to choose from.
+ * @returns The ID of the selected account, or `undefined` if no selection was made.
+ */
+export async function askAccountSelection(accounts) {
+    const questionName = randomUUID();
+    const enquirerAnswersObject = await Enquirer.prompt({
+        name: questionName,
+        message: "Select which Cloudflare account to use",
+        type: "select",
+        choices: accounts.map((account) => ({
+            name: account.id,
+            message: account.name,
+        })),
+        format: (accountId) => `${accounts.find(({ id }) => id === accountId)?.name ?? ""}`,
+    });
+    console.log("");
+    return enquirerAnswersObject[questionName];
+}

package/dist/cli/utils/create-open-next-config.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Finds the path to the OpenNext configuration file if it exists.
+ *
+ * @param appDir The directory to check for the open-next.config.ts file
+ * @returns The full path to open-next.config.ts if it exists, undefined otherwise
+ */
+export declare function findOpenNextConfig(appDir: string): string | undefined;
+/**
+ * Creates an `open-next.config.ts` file for the application.
+ *
+ * @param appDir The Next.js application root directory
+ * @param options.cache Whether to set up caching
+ * @returns The path to the created configuration file
+ */
+export declare function createOpenNextConfigFile(appDir: string, options: {
+    cache: boolean;
+}): string;

package/dist/cli/utils/create-open-next-config.js

@@ -0,0 +1,50 @@
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { patchCode } from "@opennextjs/aws/build/patch/astCodePatcher.js";
+import { getPackageTemplatesDirPath } from "../../utils/get-package-templates-dir-path.js";
+/**
+ * Finds the path to the OpenNext configuration file if it exists.
+ *
+ * @param appDir The directory to check for the open-next.config.ts file
+ * @returns The full path to open-next.config.ts if it exists, undefined otherwise
+ */
+export function findOpenNextConfig(appDir) {
+    const openNextConfigPath = join(appDir, "open-next.config.ts");
+    if (existsSync(openNextConfigPath)) {
+        return openNextConfigPath;
+    }
+    return undefined;
+}
+/**
+ * Creates an `open-next.config.ts` file for the application.
+ *
+ * @param appDir The Next.js application root directory
+ * @param options.cache Whether to set up caching
+ * @returns The path to the created configuration file
+ */
+export function createOpenNextConfigFile(appDir, options) {
+    const openNextConfigPath = join(appDir, "open-next.config.ts");
+    let content = readFileSync(join(getPackageTemplatesDirPath(), "open-next.config.ts"), "utf8");
+    if (!options.cache) {
+        content = patchCode(content, commentOutR2ImportRule);
+        content = patchCode(content, commentOutIncrementalCacheRule);
+    }
+    writeFileSync(openNextConfigPath, content);
+    return openNextConfigPath;
+}
+const commentOutR2ImportRule = `
+rule:
+  pattern: import $ID from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache";
+fix: |-
+  // import $ID from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache";
+`;
+const commentOutIncrementalCacheRule = `
+rule:
+  pattern: '{ incrementalCache: $ID }'
+fix: |-
+  {
+  	// For best results consider enabling R2 caching
+  	// See https://opennext.js.org/cloudflare/caching for more details
+  	// incrementalCache: $ID
+  }
+`;

package/dist/cli/utils/create-wrangler-config.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Gets the path to the Wrangler configuration file if it exists.
+ *
+ * @param appDir The directory to check for the Wrangler config file
+ * @returns The path to Wrangler config file if it exists, undefined otherwise
+ */
+export declare function findWranglerConfig(appDir: string): string | undefined;
+/**
+ * Creates a wrangler.jsonc config file in the target directory for the project.
+ *
+ * If a wrangler.jsonc file already exists it will be overridden.
+ *
+ * The function attempts to create an R2 bucket for incremental cache. If bucket creation
+ * fails (e.g., user not authenticated or R2 not enabled), a configuration without caching
+ * will be created instead.
+ *
+ * @param projectDir The target directory for the project
+ * @param defaultCompatDate The default YYYY-MM-DD compatibility date to use in the config (used if fetching the latest workerd version date fails)
+ * @returns An object containing a `cachingEnabled` which indicates whether caching has been set up during the wrangler
+ *          config file creation or not
+ */
+export declare function createWranglerConfigFile(projectDir: string, defaultCompatDate?: string): Promise<{
+    cachingEnabled: boolean;
+}>;