enable getCloudflareContext to also work with next dev

Author: dario-piotrowicz

examples/api/next.config.mjs

@@ -1,4 +1,9 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  webpack: (config) => {
+    config.externals = ["wrangler"];
+    return config;
+  },
+};
 
 export default nextConfig;

examples/api/package.json

@@ -16,12 +16,12 @@
   "dependencies": {
     "next": "catalog:",
     "react": "catalog:",
-    "react-dom": "catalog:"
+    "react-dom": "catalog:",
+    "wrangler": "catalog:"
   },
   "devDependencies": {
     "@opennextjs/cloudflare": "workspace:*",
     "@playwright/test": "catalog:",
-    "@types/node": "catalog:",
-    "wrangler": "catalog:"
+    "@types/node": "catalog:"
   }
 }

packages/cloudflare/package.json

@@ -48,5 +48,8 @@
   },
   "dependencies": {
     "ts-morph": "catalog:"
+  },
+  "peerDependencies": {
+    "wrangler": "catalog:"
   }
 }

packages/cloudflare/src/api/get-cloudflare-context.ts

@@ -37,17 +37,46 @@ export async function getCloudflareContext<
   CfProperties extends Record<string, unknown> = IncomingRequestCfProperties,
   Context = ExecutionContext,
 >(): Promise<CloudflareContext<CfProperties, Context>> {
-  const cloudflareContext = (
-    globalThis as unknown as {
-      [cloudflareContextSymbol]: CloudflareContext<CfProperties, Context> | undefined;
-    }
-  )[cloudflareContextSymbol];
+  const global = globalThis as unknown as {
+    [cloudflareContextSymbol]: CloudflareContext<CfProperties, Context> | undefined;
+  };
+
+  const cloudflareContext = global[cloudflareContextSymbol];
 
   if (!cloudflareContext) {
-    // TODO: cloudflareContext should always be present in production/preview, if not it means that this
-    //       is running under `next dev`, in this case use `getPlatformProxy` to return local proxies
-    throw new Error("Cloudflare context is not defined!");
+    // the cloudflare context is initialized by the worker and is always present in production/preview,
+    // so, it not being present means that the application is running under `next dev`
+    return getCloudflareContextInNextDev();
   }
 
   return cloudflareContext;
 }
+
+const cloudflareContextInNextDevSymbol = Symbol.for("__next-dev/cloudflare-context__");
+
+/**
+ * Gets a local proxy version of the cloudflare context (created using `getPlatformProxy`) when
+ * running in the standard next dev server (via `next dev`)
+ *
+ * @returns the local proxy version of the cloudflare context
+ */
+async function getCloudflareContextInNextDev<
+  CfProperties extends Record<string, unknown> = IncomingRequestCfProperties,
+  Context = ExecutionContext,
+>(): Promise<CloudflareContext<CfProperties, Context>> {
+  const global = globalThis as unknown as {
+    [cloudflareContextInNextDevSymbol]: CloudflareContext<CfProperties, Context> | undefined;
+  };
+
+  if (!global[cloudflareContextInNextDevSymbol]) {
+    const { getPlatformProxy } = await import("wrangler");
+    const { env, cf, ctx } = await getPlatformProxy();
+    global[cloudflareContextInNextDevSymbol] = {
+      env,
+      cf: cf as unknown as CfProperties,
+      ctx: ctx as Context,
+    };
+  }
+
+  return global[cloudflareContextInNextDevSymbol]!;
+}

packages/cloudflare/tsup.config.ts

@@ -8,6 +8,7 @@ const cliConfig = defineConfig({
   format: ["esm"],
   platform: "node",
   external: ["esbuild"],
+  clean: true,
   onSuccess: async () => {
     await cp(`${__dirname}/src/cli/templates`, `${__dirname}/dist/cli/templates`, {
       recursive: true,
@@ -22,6 +23,7 @@ const apiConfig = defineConfig({
   format: ["esm"],
   platform: "node",
   external: ["server-only"],
+  clean: true,
 });
 
 export default [cliConfig, apiConfig];