implement getCloudflareContext for production

Author: dario-piotrowicz

examples/api/app/api/hello/route.ts

@@ -1,10 +1,18 @@
 import { headers } from "next/headers";
 
+import { getCloudflareContext } from "@opennextjs/cloudflare";
+
 export async function GET() {
-  // Note: we use headers just so that the route is not built as a static one
   const headersList = headers();
-  const sayHi = !!headersList.get("should-say-hi");
-  return new Response(sayHi ? "Hi World!" : "Hello World!");
+
+  const fromCloudflareContext = !!headersList.get("from-cloudflare-context");
+
+  if (!fromCloudflareContext) {
+    return new Response("Hello World!");
+  }
+
+  const { env } = await getCloudflareContext();
+  return new Response(env.hello);
 }
 
 export async function POST(request: Request) {

examples/api/e2e-tests/base.spec.ts

@@ -15,6 +15,16 @@ test("the hello-world api GET route works as intended", async ({ page }) => {
   expect(await res.text()).toEqual("Hello World!");
 });
 
+test("returns a hello world string from the cloudflare context env", async ({ page }) => {
+  const res = await page.request.get("/api/hello", {
+    headers: {
+      "from-cloudflare-context": "true",
+    },
+  });
+  expect(res.headers()["content-type"]).toContain("text/plain");
+  expect(await res.text()).toEqual("Hello World from the cloudflare context!");
+});
+
 test("the hello-world api POST route works as intended", async ({ page }) => {
   const res = await page.request.post("/api/hello", { data: "some body" });
   expect(res.headers()["content-type"]).toContain("text/plain");

examples/api/package.json

@@ -10,7 +10,8 @@
     "build:worker": "pnpm cloudflare",
     "dev:worker": "wrangler dev --port 8770",
     "preview:worker": "pnpm build:worker && pnpm dev:worker",
-    "e2e": "playwright test"
+    "e2e": "playwright test",
+    "cf-typegen": "wrangler types --env-interface CloudflareEnv"
   },
   "dependencies": {
     "next": "catalog:",

examples/api/tsconfig.json

@@ -18,6 +18,6 @@
       }
     ]
   },
-  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx", "worker-configuration.d.ts"],
   "exclude": ["node_modules"]
 }

examples/api/worker-configuration.d.ts

@@ -0,0 +1,5 @@
+// Generated by Wrangler by running `wrangler types --env-interface CloudflareEnv`
+
+interface CloudflareEnv {
+  hello: "Hello World from the cloudflare context!";
+}

examples/api/wrangler.toml

@@ -5,3 +5,6 @@ compatibility_date = "2024-09-16"
 compatibility_flags = ["nodejs_compat_v2"]
 
 experimental_assets = { directory = ".worker-next/assets", binding = "ASSETS" }
+
+[vars]
+hello = 'Hello World from the cloudflare context!'

packages/cloudflare/package.json

@@ -8,7 +8,15 @@
     "test": "vitest --run",
     "test:watch": "vitest"
   },
-  "bin": "dist/index.mjs",
+  "bin": "dist/cli/index.mjs",
+  "main": "./dist/api/index.mjs",
+  "types": "./dist/api/index.d.mts",
+  "exports": {
+    ".": {
+      "import": "./dist/api/index.mjs",
+      "types": "./dist/api/index.d.mts"
+    }
+  },
   "files": [
     "README.md",
     "dist"

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

@@ -0,0 +1,36 @@
+import "server-only";
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface CloudflareEnv {}
+}
+
+export type CloudflareContext<
+  CfProperties extends Record<string, unknown> = IncomingRequestCfProperties,
+  Context = ExecutionContext,
+> = {
+  env: CloudflareEnv;
+  cf: CfProperties;
+  ctx: Context;
+};
+
+const cloudflareContextSymbol = Symbol.for("__cloudflare-context__");
+
+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];
+
+  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!");
+  }
+
+  return cloudflareContext;
+}

packages/cloudflare/src/api/index.ts

@@ -0,0 +1 @@
+export * from "./get-cloudflare-context";