Environment variable created in next.config.js not availabe with appDir:true

[bguerout]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #2 SMP PREEMPT_DYNAMIC Tue, 31 Jan 2023 23:06:48 +0000
Binaries:
  Node: 18.15.0
  npm: 9.5.0
  Yarn: 1.22.19
  pnpm: 7.27.0
Relevant packages:
  next: 13.2.5-canary.16
  eslint-config-next: 13.2.4
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://stackblitz.com/edit/vercel-next-js-2sdumg?file=next.config.js

To Reproduce

• Run the server
• Environment variable created in next.config.js (NEXT_PUBLIC_IGNORED) is not available in pages.tsx

Describe the Bug

When a environment variable is created in next.config.js, this variable is not avaibale in tsx/jsx context.

Note that if variable is passed on the command line or in .env.local, this works
The problems occurs only with appDir: true

Expected Behavior

Same behaviour than without appDir feature : A environment variable created in next.config.js should be available in tsx/jsx context.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[raptor-52-root]

@bguerout you can add environment variables in the next.config.js file using the env property. Here is an example of how to add an environment variable:

 /** @type {import("next").NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    appDir: true,
  },
  env: {
    NEXT_PUBLIC_IGNORED: 'world',
  },
};

module.exports = nextConfig;

[liaoyinglong]

Do not use the process.env.foo='bar' format in next.config.js. While this format may function in build mode, it can cause issues loading environment variables in development mode.

In development mode, Next.js prioritizes loading the @next/env module, which includes caching of the process.env variables.

Then next.config.js is loaded and only then is the environment variable foo added.

Subsequently, there are multiple calls to loadEnvConfig, which clears the variables that are inconsistent between the current process.env and the cached env, such as the newly added foo.

next.js/packages/next-env/index.ts

Line 26 in 06d60ac

delete process.env[key]