fix: Respect trailing slash config for _next/image route in worker

Author: sommeeeer

.changeset/evil-rabbits-relax.md

@@ -0,0 +1,5 @@
+---
+"@opennextjs/cloudflare": patch
+---
+
+fix: Respect trailing slash config for \_next/image route in worker

packages/cloudflare/src/cli/build/open-next/compile-init.ts

@@ -17,6 +17,7 @@ export async function compileInit(options: BuildOptions, wranglerConfig: Unstabl
 	const nextConfig = loadConfig(path.join(options.appBuildOutputPath, ".next"));
 	const basePath = nextConfig.basePath ?? "";
 	const deploymentId = nextConfig.deploymentId ?? "";
+	const trailingSlash = nextConfig.trailingSlash ?? false;
 
 	await build({
 		entryPoints: [initPath],
@@ -31,6 +32,7 @@ export async function compileInit(options: BuildOptions, wranglerConfig: Unstabl
 			__NEXT_BASE_PATH__: JSON.stringify(basePath),
 			__ASSETS_RUN_WORKER_FIRST__: JSON.stringify(wranglerConfig.assets?.run_worker_first ?? false),
 			__DEPLOYMENT_ID__: JSON.stringify(deploymentId),
+			__TRAILING_SLASH__: JSON.stringify(trailingSlash),
 		},
 	});
 }

packages/cloudflare/src/cli/templates/init.ts

@@ -97,6 +97,7 @@ function initRuntime() {
 		__BUILD_TIMESTAMP_MS__,
 		__NEXT_BASE_PATH__,
 		__ASSETS_RUN_WORKER_FIRST__,
+		__TRAILING_SLASH__,
 		// 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.
@@ -155,4 +156,6 @@ declare global {
 	var __ASSETS_RUN_WORKER_FIRST__: boolean | string[] | undefined;
 	// Deployment ID
 	var __DEPLOYMENT_ID__: string;
+	// Next trailingSlash config
+	var __TRAILING_SLASH__: boolean;
 }

packages/cloudflare/src/cli/templates/worker.ts

@@ -39,7 +39,10 @@ export default {
 			}
 
 			// Fallback for the Next default image loader.
-			if (url.pathname === `${globalThis.__NEXT_BASE_PATH__}/_next/image`) {
+			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);
 			}