Add support for basePath

Author: vicb

.changeset/blue-beds-crash.md

@@ -0,0 +1,5 @@
+---
+"@opennextjs/cloudflare": patch
+---
+
+Add support for basePath

examples/bugs/gh-219/package.json

@@ -16,7 +16,6 @@
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
     "@libsql/client": "^0.14.0",
-    "@opennextjs/aws": "^3.3.1",
     "@t3-oss/env-nextjs": "^0.11.1",
     "@tanstack/react-table": "^8.20.6",
     "better-sqlite3": "^11.7.0",

packages/cloudflare/package.json

@@ -53,7 +53,7 @@
   "homepage": "https://github.com/opennextjs/opennextjs-cloudflare",
   "dependencies": {
     "@dotenvx/dotenvx": "catalog:",
-    "@opennextjs/aws": "3.5.6",
+    "@opennextjs/aws": "https://pkg.pr.new/@opennextjs/aws@821",
     "enquirer": "^2.4.1",
     "glob": "catalog:",
     "ts-tqdm": "^0.8.6"

packages/cloudflare/src/api/overrides/incremental-cache/kv-incremental-cache.ts

@@ -56,8 +56,7 @@ class KVIncrementalCache implements IncrementalCache {
       // if there is no lastModified property, the file was stored during build-time cache population.
       return {
         value: entry,
-        // __BUILD_TIMESTAMP_MS__ is injected by ESBuild.
-        lastModified: (globalThis as { __BUILD_TIMESTAMP_MS__?: number }).__BUILD_TIMESTAMP_MS__,
+        lastModified: globalThis.__BUILD_TIMESTAMP_MS__,
       };
     } catch (e) {
       error("Failed to get from cache", e);

packages/cloudflare/src/api/overrides/incremental-cache/static-assets-incremental-cache.ts

@@ -33,8 +33,7 @@ class StaticAssetsIncrementalCache implements IncrementalCache {
 
       return {
         value: await response.json(),
-        // __BUILD_TIMESTAMP_MS__ is injected by ESBuild.
-        lastModified: (globalThis as { __BUILD_TIMESTAMP_MS__?: number }).__BUILD_TIMESTAMP_MS__,
+        lastModified: globalThis.__BUILD_TIMESTAMP_MS__,
       };
     } catch (e) {
       error("Failed to get from cache", e);

packages/cloudflare/src/cli/build/build.ts

@@ -70,7 +70,7 @@ export async function build(
   // Compile middleware
   await createMiddleware(options, { forceOnlyBuildOnce: true });
 
-  createStaticAssets(options);
+  createStaticAssets(options, { useBasePath: true });
 
   if (config.dangerous?.disableIncrementalCache !== true) {
     const { useTagCache, metaFiles } = createCacheAssets(options);

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

@@ -1,7 +1,8 @@
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 
-import type { BuildOptions } from "@opennextjs/aws/build/helper";
+import { loadConfig } from "@opennextjs/aws/adapters/config/util.js";
+import type { BuildOptions } from "@opennextjs/aws/build/helper.js";
 import { build } from "esbuild";
 
 /**
@@ -12,6 +13,9 @@ export async function compileInit(options: BuildOptions) {
   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 ?? "";
+
   await build({
     entryPoints: [initPath],
     outdir: path.join(options.outputDir, "cloudflare"),
@@ -22,6 +26,7 @@ export async function compileInit(options: BuildOptions) {
     platform: "node",
     define: {
       __BUILD_TIMESTAMP_MS__: JSON.stringify(Date.now()),
+      __NEXT_BASE_PATH__: JSON.stringify(basePath),
     },
   });
 }

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

@@ -91,8 +91,8 @@ function initRuntime() {
 
   Object.assign(globalThis, {
     Request: CustomRequest,
-    //@ts-expect-error Inline at build time by ESBuild
     __BUILD_TIMESTAMP_MS__: __BUILD_TIMESTAMP_MS__,
+    __NEXT_BASE_PATH__: __NEXT_BASE_PATH__,
   });
 }
 
@@ -126,3 +126,12 @@ function populateProcessEnv(url: URL, env: CloudflareEnv) {
     },
   });
 }
+
+/* eslint-disable no-var */
+declare global {
+  // Build timestamp
+  var __BUILD_TIMESTAMP_MS__: number;
+  // Next basePath
+  var __NEXT_BASE_PATH__: string;
+}
+/* eslint-enable no-var */

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

@@ -25,10 +25,10 @@ export default {
       }
 
       // Fallback for the Next default image loader.
-      if (url.pathname === "/_next/image") {
+      if (url.pathname === `${globalThis.__NEXT_BASE_PATH__}/_next/image`) {
         const imageUrl = url.searchParams.get("url") ?? "";
         return imageUrl.startsWith("/")
-          ? env.ASSETS?.fetch(new URL(imageUrl, request.url))
+          ? env.ASSETS?.fetch(`http://assets.local${imageUrl}`)
           : fetch(imageUrl, { cf: { cacheEverything: true } });
       }