title: env file not loaded by NextJS
body: <p>I'm trying to load an env variable with NextJS version 9.5.</p>
  <p>I've created a file named <code>.env.production</code> at the root of my project following the official NextJS documentation over here: <a href="https://nextjs.org/docs/basic-features/environment-variables" rel="nofollow noreferrer">https://nextjs.org/docs/basic-features/environment-variables</a></p>
  <p>Here's my env file content:</p>
  <pre><code># APP VARIABLES
  # ...
  
  # Webservices
  NEXT_PUBLIC_WEBSERVICE_HOST=$WEBSERVICE_HOST
  
  # Keycloak
  NEXT_PUBLIC_KEYCLOAK_HOST=$KEYCLOAK_HOST
  NEXT_PUBLIC_KEYCLOAK_REALM=$KEYCLOAK_REALM
  NEXT_PUBLIC_KEYCLOAK_CLIENT_ID=$KEYCLOAK_CLIENT_ID
  </code></pre>
  <p>I need these variables to be available on the browser as well so I've prepended the env variable name with <code>NEXT_PUBLIC_</code>.</p>
  <p>Once I launch the app, I can see that the env file are loaded correctly:</p>
  <pre><code>&gt; project@ start /app
  &gt; NODE_ENV=production node dist/server/server.js
  info  - Loaded env from /app/.env.production
  &gt; Config - API host: https://&lt;redacted&gt;
  &gt; Config - Keycloak host: https://&lt;redacted&gt;
  &gt; Ready on localhost:3000 - env production
  </code></pre>
  <p>But once in the browser when I try to call the API using this piece of code</p>
  <pre><code>const keycloakUrl = process.env.NEXT_PUBLIC_KEYCLOAK_HOST as string
  const keycloakRealm = process.env.NEXT_PUBLIC_KEYCLOAK_REALM as string
  export const clientId = process.env.NEXT_PUBLIC_KEYCLOAK_CLIENT_ID as string
  
  const instance = axios.create({
    baseURL: `${keycloakUrl}/auth/realms/${keycloakRealm}`,
    timeout: 30000,
  })
  
  # ...
  
  instance.post('/').catch(console.err);
  </code></pre>
  <p>I can see that my variables <code>keycloakUrl</code> and <code>keycloakRealm</code> are empty when I call my API.</p>
  <p>How can I solve this problem ?</p>