80

I am coding a website with Next.js and I tried to add google Tag Manager.
I followed the tutorial on the Next.js Github example but for some reasons I can't access to my environment variables.
It says my variable is undefined.
I created a file .env.local on my project folder (at the same level as components, node_modules, pages, etc)
In this file I created a variable like this (test purpose) :

NEXT_PUBLIC_DB_HOST=localhost

And on my index page I tried this code :

console.log("test ", process.env.NEXT_PUBLIC_DB_HOST);

But in my console I get a "test undefined".
I tried to put my variable into an .env file instead, without success.
What I am doing wrong ?

Florie Anstett
  • 1,135
  • 1
  • 7
  • 15

9 Answers9

123

This envs just works in Server Side. To access this envs in Client Side, you need declare in the next.config.js

This way:

module.exports = {
  reactStrictMode: true,
  env: {
    BASE_URL: process.env.BASE_URL,
  }
}
Dijalma Silva
  • 1,478
  • 1
  • 7
  • 7
  • 9
    As of Nextjs version 9.4 next.config.js is no longer suggested as the environment strategy. Are you using an older version of NextJS or do you find this to be the only way to have success? – cpres Aug 10 '21 at 17:49
  • 1
    I was just having this issue and this resolved my error while on Next 10.0.3 – A Webb Aug 10 '21 at 21:29
  • 26
    On Next +9, prefix the variables using `NEXT_PUBLIC_`. This will expose them on the browser. – Miquel Canal Feb 11 '22 at 19:41
  • 5
    I am on Next 12.1 and "NEXT_PUBLIC_" did not work for me even after restarting the server. This did – Matt Wright Feb 24 '22 at 02:49
69
  1. Create .env (all environments).env.development (development environment), and .env.production (production environment).

  2. Add the prefix NEXT_PUBLIC to all of your environment variables.

NEXT_PUBLIC_API_URL=http://localhost:3000/

  1. Use with prefix process.env

process.env.NEXT_PUBLIC_API_URL

  1. Stop the server and restart it:

npm run dev

  1. I hope it works. This solution for latest version of nextJs (above 9)
Safaetul Ahasan Piyas
  • 1,285
  • 1
  • 8
  • 10
  • Note that it if you try to console log it will only log to your terminal not your browser console – msmfsd Aug 09 '23 at 02:06
29

For those using NextJS +9 and looking for environment variables in the browser, you should use the NEXT_PUBLIC_ prefix. Example:

NEXT_PUBLIC_ANALYTICS_ID=123456789

See documentation for reference.

Miquel Canal
  • 992
  • 1
  • 17
  • 25
24

Restarting the server worked for me.

  1. Edit & save .env.local
  2. Stop the server and restart it, npm run dev
  3. You should get an output on the next line like this:
> klout@0.1.0 dev
> next dev

Loaded env from [path]/.env.local
BennyBlockchain
  • 241
  • 1
  • 3
12

After spending countless hours on this, I found that there is a tiny little paragraph in both the pre and post nextjs 9.4 documentation:

Key words being BUILD TIME. This means you must have set these variables when running next build and not (just) at next start to be available for the client side to access these variables.

Michael Bluth
  • 121
  • 1
  • 6
5

For video reference codegrepper link https://youtu.be/6qhF9l_AgAk

process.env only work in server not in browser so it will show undefined to fixed it use NEXT_PUBLIC_before APi key in .env.local or .env this solution only work from version 9 of nextjs.

NEXT_PUBLIC_BACKEND_API="http://localhost:1337/graphql"

secret environment like MongoURl and openAi key shouldn't be put using Next_PUBLIC_ else it will expose to browser and everyone can use it.

MONGO_URL=

OPENAI_API_KEY=

Shirshak kandel
  • 328
  • 3
  • 7
3

This is my next.config.js file.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  env: {
    BASE_URL: process.env.NEXT_PUBLIC_SITE_URL,
  },
};

module.exports = nextConfig;

Restart the server and it worked fine. using Nextjs 12.1.0 with typescript

Eric Mabo
  • 850
  • 5
  • 4
  • Do you use dotenv or something? Doesn't work for me. But I'm using inside monorepo, which have dotenv dependency in one of other package – Disorder Jun 18 '22 at 22:44
2

Adding with the most recent version of the documentation on this, v12+.

Using the next.config.js file you can specify server and client variables:

module.exports = {
  serverRuntimeConfig: {
    // Will only be available on the server side
    mySecret: 'secret',
    secondSecret: process.env.SECOND_SECRET, // Pass through env variables
  },
  publicRuntimeConfig: {
    // Will be available on both server and client
    staticFolder: '/static',
  },
}

You can still use an env.local file, and pass the variable in to the next.config.js file. For example:

 publicRuntimeConfig: {
   DB_URL: process.env.DB_URL
 }

And then you can access the variable like this:

import getConfig from 'next/config';
const { publicRuntimeConfig } = getConfig();
publicRuntimeConfig.DB_URL;
Chris
  • 161
  • 1
  • 10
1

In my case, Im pasting REACT_APP_API_URL instead of NEXT_PUBLIC_API_URL.

Kanish
  • 273
  • 4
  • 10