Environment variables are undefined

[D-Thrane]

I want to use a environment variable in _app.tsx but i get undefined.

I have tried to name it NEXT_PUBLIC_ and have tried the following i next.config

module.exports = {
  env: {
    MY_VAR: process.env.MY_VAR

I'm running next 12.0.10

[thibautsabot]

Hello!

Did you check out https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser ?

Next.js supports environment variables thought .env files.
What is the value of process.env.MY_VAR in your example?

If you want to create variable with next.config.js they should be valid and defined (like an hardcoded string).

[aryaraj132]

@D-Thrane did you found the solution? I'm facing same issue

[ImraKocis]

Same issue for me, it works when I'm in development but when I build project variable from .env is undefined. I tried few approaches but always same result value is undefined.

Build is done with docker container

First:

.env file

...
GOOGLE_ANALYTICS_ID="GTM-XXXXXX"
...

next.config.js

env: {
    GOOGLE_ANALYTICS_ID: process.env.GOOGLE_ANALYTICS_ID,
  },

_app.tsx

useEffect(() => {
    return () => {
      if (
        !IS_BUILDING &&
        typeof process.env.GOOGLE_ANALYTICS_ID !== "undefined"
      )
        TagManager.initialize({
          gtmId: process.env.GOOGLE_ANALYTICS_ID,
        });
    };
  }, []);

Secund:

.env file

...
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="GTM-XXXXXX"
...

_app.tsx

useEffect(() => {
    return () => {
      if (
        !IS_BUILDING &&
        typeof process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID !== "undefined"
      )
        TagManager.initialize({
          gtmId: process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID,
        });
    };
  }, []);

I have also tried with publicRuntimeConfig but no change. I will be thankful for any advice.

Runing on

"next": "^13.4.1",

[vargheses-b]

I am also having the same issue,
In my case, I am trying to add rewrite in next.config with NODE_IP (k8s)
I tried NEXT_PUBLIC

tried with env
env: { NODE_IP: process.env.NODE_IP, },

But nothing helped.

Running on "next": "12.1.0"

[gmaringa]

Did anyone ever find a solution to this matter. in my next.config.mjs, I have: /** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
env: {
BASE_URL: process.env.NEXT_PUBLIC_SITE_URL,
},
};

export default nextConfig;

and In .env.local I have: NEXT_PUBLIC_SITE_URL="http://localhost:3000"

[harshblip]

I got the same problem. tried changing the next.config file, tried importing async function through config file
the problem solved for me when i installed dotenv package. with it, its working perfectly fine
Maybe this was some nextjs14 update which messed up with next.js's environment variable system.

Do let me know if it solves your problem

[raju-geekyants]

Hey @harshblip, I tried installing dotenv package.

// FILE:  utils/service.ts 
import dotenv from 'dotenv';
dotenv.config();
export const axiosInstanceWithURL = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL
  // some extra configs...
});

But still can't see env's loading into my file, client side.
Am I doing something wrong ?

[thallysondias]

Same problem:

/api/route.ts
function buildHeaders() { const headers = new Headers(); headers.append("ApiKey", ${process.env.NEXT_PUBLIC_EGOI_API_KEY}); headers.append("Content-Type", "application/json"); return headers; }

.env.local
NEXT_PUBLIC_EGOI_APIKEY=123123123

but return undefined

[sensorario]

When I need env variables I just add them in next.config file… have u ever tried?

[ccatto]

In a client component in Next.js 14 app router when prefixing the .env variable with the "NEXT_PUBLIC_" so if in .env :

NEXT_PUBLIC_MY_VAR="https://localhost:3000"

Then in the code call it like normal such as: process.env.NEXT_PUBLIC_MY_VAR it worked for me.

[hinn254]

This worked for me on a client component