Repository: next.js
Issue: Middleware Unable to Access Updated Environment Variables Set Asynchronously in next.config.js
Labels: bug,Middleware,Runtime

### [Link to the code that reproduces this issue](https://codesandbox.io/p/devbox/nervous-rosalind-995cry?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm0dp5eo000063b6omadk8h8z%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm0dp5eo000023b6o1s7lqv4w%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm0dp5eo000043b6oaoyfwx75%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm0dp5eo000053b6ockcxnmfq%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cm0dp5eo000023b6o1s7lqv4w%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm0dp5eo000013b6oema7ehj6%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522cm0dp5eo000023b6o1s7lqv4w%2522%252C%2522activeTabId%2522%253A%2522cm0dp5eo000013b6oema7ehj6%2522%257D%252C%2522cm0dp5eo000053b6ockcxnmfq%2522%253A%257B%2522id%2522%253A%2522cm0dp5eo000053b6ockcxnmfq%2522%252C%2522activeTabId%2522%253A%2522cm0dpfhnf002f3b6ny8a9p48o%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522DOCS%2522%252C%2522id%2522%253A%2522cm0dpfhnf002f3b6ny8a9p48o%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522cm0dp5eo000043b6oaoyfwx75%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm0dp5eo000033b6odvt7emld%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522id%2522%253A%2522cm0dp5eo000043b6oaoyfwx75%2522%252C%2522activeTabId%2522%253A%2522cm0dp5eo000033b6odvt7emld%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)


### To Reproduce

1. **Open the Sandbox:**
   - Go to the provided  CodeSandbox link containing the reproduction code.

2. **Start the Application:**
   - Start the Next.js development server by running:
     ```bash
     npm run dev
     ```
   - This will launch the application in development mode.

4. **Observe Console Logs:**
   - After the server starts, the `updateEnvVars` function in `next.config.js` will run asynchronously, and you'll see its console logs in the terminal.
   - Wait for the server to finish starting up and loading the configurations.

5. **Make a Request to Trigger Middleware:**
   - Open your browser and navigate to any page of the application (e.g., `http://localhost:3000`).
   - This action will trigger the middleware function.

6. **Check the Terminal Output:**
   - Look at the terminal where your development server is running. You should see the output of the console logs from the middleware:
     ```bash
     process.env.ENV_WITH_INSTRUMENTATION: true
     process.env.ENV_WITHOUT_CONFIGURE_NEXT: true
     process.env.ENV_WITH_CONFIGURE_NEXT: undefined
     ```

7. **Compare Results:**
   - Notice that `process.env.ENV_WITH_CONFIGURE_NEXT` is `undefined` despite being set in `next.config.js` after an asynchronous operation. This shows the environment variable is not accessible in the middleware context.

### Current vs. Expected behavior

**Current Behavior:**

- After starting the application, the `updateEnvVars` function in `next.config.js` is executed asynchronously with a delay.
- When making a request to trigger the middleware, the console logs show:
  - `process.env.ENV_WITH_INSTRUMENTATION` is `'true'`.
  - `process.env.ENV_WITHOUT_CONFIGURE_NEXT` is `'true'`.
  - `process.env.ENV_WITH_CONFIGURE_NEXT` is `undefined`.
- This indicates that while `process.env.ENV_WITH_INSTRUMENTATION` and `process.env.ENV_WITHOUT_CONFIGURE_NEXT` are correctly logged, the environment variable `process.env.ENV_WITH_CONFIGURE_NEXT`, which is set asynchronously in `next.config.js`, is not accessible in the middleware.

**Expected Behavior:**

- When the application runs and the middleware is triggered, all environment variables set or modified in `next.config.js`, including those set asynchronously, should be available.
- The expected console log output in the middleware should be:
  - `process.env.ENV_WITH_INSTRUMENTATION` as `'true'`.
  - `process.env.ENV_WITHOUT_CONFIGURE_NEXT` as `'true'`.
  - `process.env.ENV_WITH_CONFIGURE_NEXT` as `'true'`, indicating it has been set after the asynchronous operation completes.
- The environment variable `process.env.ENV_WITH_CONFIGURE_NEXT` should not be `undefined`; it should reflect its updated value after being set asynchronously in `next.config.js`.

### Provide environment information

```bash
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:28:45 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T6020
Binaries:
  Node: 18.17.0
  npm: 9.6.7
  Yarn: 1.22.22
  pnpm: 8.14.3
Relevant Packages:
  next: 13.5.6
  eslint-config-next: 13.4.12
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.6
Next.js Config:
  output: N/A
```


### Which area(s) are affected? (Select all that apply)

Middleware, Runtime

### Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

### Additional context

_No response_