@opennextjs/cloudflare 1.13.1 → 1.14.0

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

@@ -7,6 +7,7 @@ import type { PREFIX_ENV_NAME as R2_CACHE_PREFIX_ENV_NAME } from "./overrides/in
 declare global {
     interface CloudflareEnv {
         ASSETS?: Fetcher;
+        IMAGES?: ImagesBinding;
         NEXTJS_ENV?: string;
         WORKER_SELF_REFERENCE?: Service;
         NEXT_INC_CACHE_KV?: KVNamespace;

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

@@ -14,14 +14,20 @@ export async function compileImages(options) {
         ? 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_LOCAL_PATTERNS__ = JSON.stringify(imagesManifest?.images?.localPatterns ?? defaultLocalPatterns);
+    const __IMAGES_DEVICE_SIZES__ = JSON.stringify(imagesManifest?.images?.deviceSizes ?? defaultDeviceSizes);
+    const __IMAGES_IMAGE_SIZES__ = JSON.stringify(imagesManifest?.images?.imageSizes ?? defaultImageSizes);
+    const __IMAGES_QUALITIES__ = JSON.stringify(imagesManifest?.images?.qualities ?? defaultQualities);
+    const __IMAGES_FORMATS__ = JSON.stringify(imagesManifest?.images?.formats ?? defaultFormats);
+    const __IMAGES_MINIMUM_CACHE_TTL_SEC__ = JSON.stringify(imagesManifest?.images?.minimumCacheTTL ?? defaultMinimumCacheTTLSec);
     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");
+    const __IMAGES_MAX_REDIRECTS__ = JSON.stringify(imagesManifest?.images?.maximumRedirects ?? defaultMaxRedirects);
     await build({
         entryPoints: [imagesPath],
         outdir: path.join(options.outputDir, "cloudflare"),
-        bundle: false,
+        bundle: true,
         minify: false,
         format: "esm",
         target: "esnext",
@@ -29,9 +35,25 @@ export async function compileImages(options) {
         define: {
             __IMAGES_REMOTE_PATTERNS__,
             __IMAGES_LOCAL_PATTERNS__,
+            __IMAGES_DEVICE_SIZES__,
+            __IMAGES_IMAGE_SIZES__,
+            __IMAGES_QUALITIES__,
+            __IMAGES_FORMATS__,
+            __IMAGES_MINIMUM_CACHE_TTL_SEC__,
             __IMAGES_ALLOW_SVG__,
             __IMAGES_CONTENT_SECURITY_POLICY__,
             __IMAGES_CONTENT_DISPOSITION__,
+            __IMAGES_MAX_REDIRECTS__,
         },
     });
 }
+const defaultDeviceSizes = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
+// 16 was included in Next.js 15
+const defaultImageSizes = [32, 48, 64, 96, 128, 256, 384];
+// All values between 1-100 were allowed in Next.js 15
+const defaultQualities = [75];
+// Was unlimited in Next.js 15
+const defaultMaxRedirects = 3;
+const defaultFormats = ["image/webp"];
+const defaultMinimumCacheTTLSec = 14400;
+const defaultLocalPatterns = { pathname: "/**" };

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

@@ -10,14 +10,25 @@ export type LocalPattern = {
     search?: string;
 };
 /**
- * Fetches an images.
+ * Handles requests to /_next/image(/), including image optimizations.
  *
- * 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.
+ * Image optimization is disabled and the original image is returned if `env.IMAGES` is undefined.
+ *
+ * Throws an exception on unexpected errors.
+ *
+ * @param requestURL
+ * @param requestHeaders
+ * @param env
+ * @returns A promise that resolves to the resolved request.
  */
-export declare function fetchImage(fetcher: Fetcher | undefined, imageUrl: string, ctx: ExecutionContext): Promise<Response | undefined>;
+export declare function handleImageRequest(requestURL: URL, requestHeaders: Headers, env: CloudflareEnv): Promise<Response>;
+export type OptimizedImageFormat = "image/avif" | "image/webp";
+export declare function matchLocalPattern(pattern: LocalPattern, url: {
+    pathname: string;
+    search: string;
+}): boolean;
 export declare function matchRemotePattern(pattern: RemotePattern, url: URL): boolean;
-export declare function matchLocalPattern(pattern: LocalPattern, url: URL): boolean;
+type ImageContentType = "image/avif" | "image/webp" | "image/png" | "image/jpeg" | "image/jxl" | "image/jp2" | "image/heic" | "image/gif" | "image/svg+xml" | "image/x-icon" | "image/x-icns" | "image/tiff" | "image/bmp";
 /**
  * Detects the content type by looking at the first few bytes of a file
  *
@@ -26,11 +37,19 @@ export declare function matchLocalPattern(pattern: LocalPattern, url: URL): bool
  * @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" | "image/jxl" | "image/heic" | "application/pdf" | "image/jp2" | undefined;
+export declare function detectImageContentType(buffer: Uint8Array): ImageContentType | null;
 declare global {
     var __IMAGES_REMOTE_PATTERNS__: RemotePattern[];
     var __IMAGES_LOCAL_PATTERNS__: LocalPattern[];
+    var __IMAGES_DEVICE_SIZES__: number[];
+    var __IMAGES_IMAGE_SIZES__: number[];
+    var __IMAGES_QUALITIES__: number[];
+    var __IMAGES_FORMATS__: NextConfigImageFormat[];
+    var __IMAGES_MINIMUM_CACHE_TTL_SEC__: number;
     var __IMAGES_ALLOW_SVG__: boolean;
     var __IMAGES_CONTENT_SECURITY_POLICY__: string;
     var __IMAGES_CONTENT_DISPOSITION__: string;
+    var __IMAGES_MAX_REDIRECTS__: number;
+    type NextConfigImageFormat = "image/avif" | "image/webp";
 }
+export {};

package/dist/cli/templates/images.js

@@ -1,97 +1,488 @@
-let NEXT_IMAGE_REGEXP;
+import { error, warn } from "@opennextjs/aws/adapters/logger.js";
 /**
- * Fetches an images.
+ * Handles requests to /_next/image(/), including image optimizations.
  *
- * 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.
+ * Image optimization is disabled and the original image is returned if `env.IMAGES` is undefined.
+ *
+ * Throws an exception on unexpected errors.
+ *
+ * @param requestURL
+ * @param requestHeaders
+ * @param env
+ * @returns A promise that resolves to the resolved request.
  */
-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();
-    }
-    // Local
-    if (imageUrl.startsWith("/")) {
-        // @ts-expect-error TS2339 Missing types for URL.parse
-        const url = URL.parse(imageUrl, "http://n");
-        if (url == null) {
-            return getUrlErrorResponse();
+export async function handleImageRequest(requestURL, requestHeaders, env) {
+    const parseResult = parseImageRequest(requestURL, requestHeaders);
+    if (!parseResult.ok) {
+        return new Response(parseResult.message, {
+            status: 400,
+        });
+    }
+    let imageResponse;
+    if (parseResult.url.startsWith("/")) {
+        if (env.ASSETS === undefined) {
+            error("env.ASSETS binding is not defined");
+            return new Response('"url" parameter is valid but upstream response is invalid', {
+                status: 404,
+            });
+        }
+        const absoluteURL = new URL(parseResult.url, requestURL);
+        imageResponse = await env.ASSETS.fetch(absoluteURL);
+    }
+    else {
+        let fetchImageResult;
+        try {
+            fetchImageResult = await fetchWithRedirects(parseResult.url, 7_000, __IMAGES_MAX_REDIRECTS__);
         }
-        // This method will never throw because URL parser will handle invalid input.
-        const pathname = decodeURIComponent(url.pathname);
-        NEXT_IMAGE_REGEXP ??= /\/_next\/image($|\/)/;
-        if (NEXT_IMAGE_REGEXP.test(pathname)) {
-            return getUrlErrorResponse();
+        catch (e) {
+            throw new Error("Failed to fetch image", { cause: e });
         }
-        // If localPatterns are not defined all local images are allowed.
-        if (__IMAGES_LOCAL_PATTERNS__.length > 0 &&
-            !__IMAGES_LOCAL_PATTERNS__.some((p) => matchLocalPattern(p, url))) {
-            return getUrlErrorResponse();
+        if (!fetchImageResult.ok) {
+            if (fetchImageResult.error === "timed_out") {
+                return new Response('"url" parameter is valid but upstream response timed out', {
+                    status: 504,
+                });
+            }
+            if (fetchImageResult.error === "too_many_redirects") {
+                return new Response('"url" parameter is valid but upstream response is invalid', {
+                    status: 508,
+                });
+            }
+            throw new Error("Failed to fetch image");
         }
-        return fetcher?.fetch(`http://assets.local${imageUrl}`);
+        imageResponse = fetchImageResult.response;
     }
-    // Remote
-    let url;
-    try {
-        url = new URL(imageUrl);
+    if (!imageResponse.ok || imageResponse.body === null) {
+        return new Response('"url" parameter is valid but upstream response is invalid', {
+            status: imageResponse.status,
+        });
     }
-    catch {
-        return getUrlErrorResponse();
+    let immutable = false;
+    if (parseResult.static) {
+        immutable = true;
+    }
+    else {
+        const cacheControlHeader = imageResponse.headers.get("Cache-Control");
+        if (cacheControlHeader !== null) {
+            // TODO: Properly parse header
+            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,
+        });
     }
-    if (url.protocol !== "http:" && url.protocol !== "https:") {
-        return getUrlErrorResponse();
+    const contentType = detectImageContentType(readImageHeaderBytesResult.value);
+    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', {
+            status: 400,
+        });
     }
-    // The remotePatterns is used to allow images from specific remote external paths and block all others.
-    if (!__IMAGES_REMOTE_PATTERNS__.some((p) => matchRemotePattern(p, url))) {
-        return getUrlErrorResponse();
+    if (contentType === SVG) {
+        if (!__IMAGES_ALLOW_SVG__) {
+            return new Response('"url" parameter is valid but image type is not allowed', {
+                status: 400,
+            });
+        }
+        const response = createImageResponse(imageStream, contentType, {
+            immutable,
+        });
+        return response;
     }
-    const imgResponse = await fetch(imageUrl, { cf: { cacheEverything: true } });
-    if (!imgResponse.body) {
-        return imgResponse;
+    if (contentType === GIF) {
+        if (env.IMAGES === undefined) {
+            warn("env.IMAGES binding is not defined");
+            const response = createImageResponse(imageStream, contentType, {
+                immutable,
+            });
+            return response;
+        }
+        const imageSource = env.IMAGES.input(imageStream);
+        const imageTransformationResult = await imageSource
+            .transform({
+            width: parseResult.width,
+            fit: "scale-down",
+        })
+            .output({
+            quality: parseResult.quality,
+            format: GIF,
+        });
+        const outputImageStream = imageTransformationResult.image();
+        const response = createImageResponse(outputImageStream, GIF, {
+            immutable,
+        });
+        return response;
     }
-    const buffer = new ArrayBuffer(32);
+    if (contentType === AVIF || contentType === WEBP || contentType === JPEG || contentType === PNG) {
+        if (env.IMAGES === undefined) {
+            warn("env.IMAGES binding is not defined");
+            const response = createImageResponse(imageStream, contentType, {
+                immutable,
+            });
+            return response;
+        }
+        const outputFormat = parseResult.format ?? contentType;
+        const imageSource = env.IMAGES.input(imageStream);
+        const imageTransformationResult = await imageSource
+            .transform({
+            width: parseResult.width,
+            fit: "scale-down",
+        })
+            .output({
+            quality: parseResult.quality,
+            format: outputFormat,
+        });
+        const outputImageStream = imageTransformationResult.image();
+        const response = createImageResponse(outputImageStream, outputFormat, {
+            immutable,
+        });
+        return response;
+    }
+    warn(`Image content type ${contentType} not supported`);
+    const response = createImageResponse(imageStream, contentType, {
+        immutable,
+    });
+    return response;
+}
+/**
+ * Fetch call with max redirects and timeouts.
+ *
+ * Re-throws the exception thrown by a fetch call.
+ * @param url
+ * @param timeoutMS Timeout for a single fetch call.
+ * @param maxRedirectCount
+ * @returns
+ */
+async function fetchWithRedirects(url, timeoutMS, maxRedirectCount) {
+    // TODO: Add dangerouslyAllowLocalIP support
+    let response;
     try {
-        let contentType;
-        // respBody is eventually used for the response
-        // contentBody is used to detect the content type
-        const [respBody, contentBody] = imgResponse.body.tee();
-        const reader = contentBody.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);
+        response = await fetch(url, {
+            signal: AbortSignal.timeout(timeoutMS),
+            redirect: "manual",
+        });
+    }
+    catch (e) {
+        if (e instanceof Error && e.name === "TimeoutError") {
+            const result = {
+                ok: false,
+                error: "timed_out",
+            };
+            return result;
         }
-        if (!contentType) {
-            // Fallback to upstream header when the type can not be detected
-            // https://github.com/vercel/next.js/blob/d76f0b1/packages/next/src/server/image-optimizer.ts#L748
-            contentType = imgResponse.headers.get("content-type") ?? "";
+        throw e;
+    }
+    if (redirectResponseStatuses.includes(response.status)) {
+        const locationHeader = response.headers.get("Location");
+        if (locationHeader !== null) {
+            if (maxRedirectCount < 1) {
+                const result = {
+                    ok: false,
+                    error: "too_many_redirects",
+                };
+                return result;
+            }
+            let redirectTarget;
+            if (locationHeader.startsWith("/")) {
+                redirectTarget = new URL(locationHeader, url).href;
+            }
+            else {
+                redirectTarget = locationHeader;
+            }
+            const result = await fetchWithRedirects(redirectTarget, timeoutMS, maxRedirectCount - 1);
+            return result;
         }
-        // Sanitize the content type:
-        // - Accept images only
-        // - Reject multiple content types
-        if (!contentType.startsWith("image/") || contentType.includes(",")) {
-            contentType = undefined;
+    }
+    const result = {
+        ok: true,
+        response: response,
+    };
+    return result;
+}
+const redirectResponseStatuses = [301, 302, 303, 307, 308];
+function createImageResponse(image, contentType, imageResponseFlags) {
+    const response = new Response(image, {
+        headers: {
+            Vary: "Accept",
+            "Content-Type": contentType,
+            "Content-Disposition": __IMAGES_CONTENT_DISPOSITION__,
+            "Content-Security-Policy": __IMAGES_CONTENT_SECURITY_POLICY__,
+        },
+    });
+    if (imageResponseFlags.immutable) {
+        response.headers.set("Cache-Control", "public, max-age=315360000, immutable");
+    }
+    return response;
+}
+/**
+ * Parses the image request URL and headers.
+ *
+ * This function validates the parameters and returns either the parsed result or an error message.
+ *
+ * @param requestURL request URL
+ * @param requestHeaders request headers
+ * @returns an instance of `ParseImageRequestURLSuccessResult` when successful, or an instance of `ErrorResult` when failed.
+ */
+function parseImageRequest(requestURL, requestHeaders) {
+    const formats = __IMAGES_FORMATS__;
+    const parsedUrlOrError = validateUrlQueryParameter(requestURL);
+    if (!("url" in parsedUrlOrError)) {
+        return parsedUrlOrError;
+    }
+    const widthOrError = validateWidthQueryParameter(requestURL);
+    if (typeof widthOrError !== "number") {
+        return widthOrError;
+    }
+    const qualityOrError = validateQualityQueryParameter(requestURL);
+    if (typeof qualityOrError !== "number") {
+        return qualityOrError;
+    }
+    const acceptHeader = requestHeaders.get("Accept") ?? "";
+    let format = null;
+    // Find a more specific format that the client accepts.
+    for (const allowedFormat of formats) {
+        if (acceptHeader.includes(allowedFormat)) {
+            format = allowedFormat;
+            break;
+        }
+    }
+    const result = {
+        ok: true,
+        url: parsedUrlOrError.url,
+        width: widthOrError,
+        quality: qualityOrError,
+        format,
+        static: parsedUrlOrError.static,
+    };
+    return result;
+}
+/**
+ * Validates that there is exactly one "url" query parameter.
+ *
+ * @returns the validated URL or an error result.
+ */
+function validateUrlQueryParameter(requestURL) {
+    // There should be a single "url" parameter.
+    const urls = requestURL.searchParams.getAll("url");
+    if (urls.length < 1) {
+        const result = {
+            ok: false,
+            message: '"url" parameter is required',
+        };
+        return result;
+    }
+    if (urls.length > 1) {
+        const result = {
+            ok: false,
+            message: '"url" parameter cannot be an array',
+        };
+        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 = {
+            ok: false,
+            message: '"url" parameter is too long',
+        };
+        return result;
+    }
+    if (url.startsWith("//")) {
+        const result = {
+            ok: false,
+            message: '"url" parameter cannot be a protocol-relative URL (//)',
+        };
+        return result;
+    }
+    if (url.startsWith("/")) {
+        const staticAsset = url.startsWith(`${__NEXT_BASE_PATH__ || ""}/_next/static/media`);
+        const pathname = getPathnameFromRelativeURL(url);
+        if (/\/_next\/image($|\/)/.test(decodeURIComponent(pathname))) {
+            const result = {
+                ok: false,
+                message: '"url" parameter cannot be recursive',
+            };
+            return result;
         }
-        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(respBody, { ...imgResponse, headers });
+        if (!staticAsset) {
+            if (!hasLocalMatch(__IMAGES_LOCAL_PATTERNS__, url)) {
+                const result = { ok: false, message: '"url" parameter is not allowed' };
+                return result;
+            }
         }
-        // Cancel the unused stream
-        ctx.waitUntil(respBody.cancel());
-        return new Response('"url" parameter is valid but image type is not allowed', {
-            status: 400,
-        });
+        return { url, static: staticAsset };
+    }
+    let parsedURL;
+    try {
+        parsedURL = new URL(url);
     }
     catch {
-        return new Response('"url" parameter is valid but upstream response is invalid', {
-            status: 400,
-        });
+        const result = { ok: false, message: '"url" parameter is invalid' };
+        return result;
+    }
+    const validProtocols = ["http:", "https:"];
+    if (!validProtocols.includes(parsedURL.protocol)) {
+        const result = {
+            ok: false,
+            message: '"url" parameter is invalid',
+        };
+        return result;
+    }
+    if (!hasRemoteMatch(__IMAGES_REMOTE_PATTERNS__, parsedURL)) {
+        const result = {
+            ok: false,
+            message: '"url" parameter is not allowed',
+        };
+        return result;
+    }
+    return { url: parsedURL.href, static: false };
+}
+/**
+ * Validates the "w" (width) query parameter.
+ *
+ * @returns the validated width number or an error result.
+ */
+function validateWidthQueryParameter(requestURL) {
+    const widthQueryValues = requestURL.searchParams.getAll("w");
+    if (widthQueryValues.length < 1) {
+        const result = {
+            ok: false,
+            message: '"w" parameter (width) is required',
+        };
+        return result;
+    }
+    if (widthQueryValues.length > 1) {
+        const result = {
+            ok: false,
+            message: '"w" parameter (width) cannot be an array',
+        };
+        return result;
+    }
+    const widthQueryValue = widthQueryValues[0];
+    if (!/^[0-9]+$/.test(widthQueryValue)) {
+        const result = {
+            ok: false,
+            message: '"w" parameter (width) must be an integer greater than 0',
+        };
+        return result;
+    }
+    const width = parseInt(widthQueryValue, 10);
+    if (width <= 0 || isNaN(width)) {
+        const result = {
+            ok: false,
+            message: '"w" parameter (width) must be an integer greater than 0',
+        };
+        return result;
+    }
+    const sizeValid = __IMAGES_DEVICE_SIZES__.includes(width) || __IMAGES_IMAGE_SIZES__.includes(width);
+    if (!sizeValid) {
+        const result = {
+            ok: false,
+            message: `"w" parameter (width) of ${width} is not allowed`,
+        };
+        return result;
     }
+    return width;
+}
+/**
+ * Validates the "q" (quality) query parameter.
+ *
+ * @returns the validated quality number or an error result.
+ */
+function validateQualityQueryParameter(requestURL) {
+    const qualityQueryValues = requestURL.searchParams.getAll("q");
+    if (qualityQueryValues.length < 1) {
+        const result = {
+            ok: false,
+            message: '"q" parameter (quality) is required',
+        };
+        return result;
+    }
+    if (qualityQueryValues.length > 1) {
+        const result = {
+            ok: false,
+            message: '"q" parameter (quality) cannot be an array',
+        };
+        return result;
+    }
+    const qualityQueryValue = qualityQueryValues[0];
+    if (!/^[0-9]+$/.test(qualityQueryValue)) {
+        const result = {
+            ok: false,
+            message: '"q" parameter (quality) must be an integer between 1 and 100',
+        };
+        return result;
+    }
+    const quality = parseInt(qualityQueryValue, 10);
+    if (isNaN(quality) || quality < 1 || quality > 100) {
+        const result = {
+            ok: false,
+            message: '"q" parameter (quality) must be an integer between 1 and 100',
+        };
+        return result;
+    }
+    if (!__IMAGES_QUALITIES__.includes(quality)) {
+        const result = {
+            ok: false,
+            message: `"q" parameter (quality) of ${quality} is not allowed`,
+        };
+        return result;
+    }
+    return quality;
+}
+function getPathnameFromRelativeURL(relativeURL) {
+    return relativeURL.split("?")[0];
+}
+function hasLocalMatch(localPatterns, relativeURL) {
+    const parseRelativeURLResult = parseRelativeURL(relativeURL);
+    for (const localPattern of localPatterns) {
+        const matched = matchLocalPattern(localPattern, parseRelativeURLResult);
+        if (matched) {
+            return true;
+        }
+    }
+    return false;
+}
+function parseRelativeURL(relativeURL) {
+    if (!relativeURL.includes("?")) {
+        const result = {
+            pathname: relativeURL,
+            search: "",
+        };
+        return result;
+    }
+    const parts = relativeURL.split("?");
+    const pathname = parts[0];
+    const search = "?" + parts.slice(1).join("?");
+    const result = {
+        pathname,
+        search,
+    };
+    return result;
+}
+export function matchLocalPattern(pattern, url) {
+    if (pattern.search !== undefined && pattern.search !== url.search) {
+        return false;
+    }
+    return new RegExp(pattern.pathname).test(url.pathname);
+}
+function hasRemoteMatch(remotePatterns, url) {
+    for (const remotePattern of remotePatterns) {
+        const matched = matchRemotePattern(remotePattern, url);
+        if (matched) {
+            return true;
+        }
+    }
+    return false;
 }
 export function matchRemotePattern(pattern, url) {
     // https://github.com/vercel/next.js/blob/d76f0b1/packages/next/src/shared/lib/match-remote-pattern.ts
@@ -111,19 +502,6 @@ export function matchRemotePattern(pattern, url) {
     // Should be the same as writeImagesManifest()
     return new RegExp(pattern.pathname).test(url.pathname);
 }
-export function matchLocalPattern(pattern, url) {
-    // https://github.com/vercel/next.js/blob/d76f0b1/packages/next/src/shared/lib/match-local-pattern.ts
-    if (pattern.search !== undefined && pattern.search !== url.search) {
-        return false;
-    }
-    return new RegExp(pattern.pathname).test(url.pathname);
-}
-/**
- * @returns same error as Next.js when the url query parameter is not accepted.
- */
-function getUrlErrorResponse() {
-    return new Response(`"url" parameter is not allowed`, { status: 400 });
-}
 const AVIF = "image/avif";
 const WEBP = "image/webp";
 const PNG = "image/png";
@@ -137,8 +515,6 @@ const ICO = "image/x-icon";
 const ICNS = "image/x-icns";
 const TIFF = "image/tiff";
 const BMP = "image/bmp";
-// pdf will be rejected (not an `image/...` type)
-const PDF = "application/pdf";
 /**
  * Detects the content type by looking at the first few bytes of a file
  *
@@ -147,7 +523,7 @@ const PDF = "application/pdf";
  * @param buffer The image bytes
  * @returns a content type of undefined for unsupported content
  */
-export function detectContentType(buffer) {
+export function detectImageContentType(buffer) {
     if ([0xff, 0xd8, 0xff].every((b, i) => buffer[i] === b)) {
         return JPEG;
     }
@@ -190,10 +566,8 @@ export function detectContentType(buffer) {
     if ([0, 0, 0, 0, 0x66, 0x74, 0x79, 0x70, 0x68, 0x65, 0x69, 0x63].every((b, i) => !b || buffer[i] === b)) {
         return HEIC;
     }
-    if ([0x25, 0x50, 0x44, 0x46, 0x2d].every((b, i) => buffer[i] === b)) {
-        return PDF;
-    }
     if ([0x00, 0x00, 0x00, 0x0c, 0x6a, 0x50, 0x20, 0x20, 0x0d, 0x0a, 0x87, 0x0a].every((b, i) => buffer[i] === b)) {
         return JP2;
     }
+    return null;
 }

package/dist/cli/templates/worker.js

@@ -1,5 +1,5 @@
 //@ts-expect-error: Will be resolved by wrangler build
-import { fetchImage } from "./cloudflare/images.js";
+import { 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
@@ -35,8 +35,7 @@ export default {
             // Fallback for the Next default image loader.
             if (url.pathname ===
                 `${globalThis.__NEXT_BASE_PATH__}/_next/image${globalThis.__TRAILING_SLASH__ ? "/" : ""}`) {
-                const imageUrl = url.searchParams.get("url") ?? "";
-                return await fetchImage(env.ASSETS, imageUrl, ctx);
+                return await handleImageRequest(url, request.headers, env);
             }
             // - `Request`s are handled by the Next server
             const reqOrResp = await middlewareHandler(request, env, ctx);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opennextjs/cloudflare",
   "description": "Cloudflare builder for next apps",
-  "version": "1.13.1",
+  "version": "1.14.0",
   "type": "module",
   "bin": {
     "opennextjs-cloudflare": "dist/cli/index.js"