refactor: Next env loading (#337)

Author: vicb

packages/cloudflare/env.d.ts

@@ -7,8 +7,6 @@ declare global {
       NEXT_PRIVATE_DEBUG_CACHE?: string;
       OPEN_NEXT_ORIGIN: string;
       NODE_ENV?: string;
-      // Whether process.env has been populated (on first request).
-      __PROCESS_ENV_POPULATED?: string;
     }
   }
 }

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

@@ -9,9 +9,11 @@ import { extractProjectEnvVars } from "../utils/index.js";
  * Compiles the values extracted from the project's env files to the output directory for use in the worker.
  */
 export function compileEnvFiles(buildOpts: BuildOptions) {
+  const envDir = path.join(buildOpts.outputDir, "env");
+  fs.mkdirSync(envDir, { recursive: true });
   ["production", "development", "test"].forEach((mode) =>
     fs.appendFileSync(
-      path.join(buildOpts.outputDir, `.env.mjs`),
+      path.join(envDir, `next-env.mjs`),
       `export const ${mode} = ${JSON.stringify(extractProjectEnvVars(mode, buildOpts))};\n`
     )
   );

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

@@ -2,6 +2,8 @@ import { AsyncLocalStorage } from "node:async_hooks";
 
 import type { CloudflareContext } from "../../api";
 // @ts-expect-error: resolved by wrangler build
+import * as nextEnvVars from "./env/next-env.mjs";
+// @ts-expect-error: resolved by wrangler build
 import { handler as middlewareHandler } from "./middleware/handler.mjs";
 // @ts-expect-error: resolved by wrangler build
 import { handler as serverHandler } from "./server-functions/default/handler.mjs";
@@ -21,15 +23,15 @@ const cloudflareContextALS = new AsyncLocalStorage<CloudflareContext>();
   }
 );
 
+// Populate process.env on the first request
+let processEnvPopulated = false;
+
 export default {
   async fetch(request, env, ctx) {
     return cloudflareContextALS.run({ env, ctx, cf: request.cf }, async () => {
       const url = new URL(request.url);
 
-      if (process.env.__PROCESS_ENV_POPULATED !== "1") {
-        await populateProcessEnv(url, env.NEXTJS_ENV);
-        process.env.__PROCESS_ENV_POPULATED = "1";
-      }
+      populateProcessEnv(url, env.NEXTJS_ENV);
 
       if (url.pathname === "/_next/image") {
         const imageUrl = url.searchParams.get("url") ?? "";
@@ -59,10 +61,11 @@ export default {
  *
  * Note that cloudflare env string values are copied by the middleware handler.
  */
-async function populateProcessEnv(url: URL, nextJsEnv?: string) {
-  // @ts-expect-error: resolved by wrangler build
-  const nextEnvVars = await import("./.env.mjs");
-
+function populateProcessEnv(url: URL, nextJsEnv?: string) {
+  if (processEnvPopulated) {
+    return;
+  }
+  processEnvPopulated = true;
   const mode = nextJsEnv ?? "production";
 
   if (nextEnvVars[mode]) {