Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

next.js environment variables are undefined (Next.js 10.0.5)

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 ?

like image 998
Florie Anstett Avatar asked Feb 10 '21 12:02

Florie Anstett


People also ask

How do you call an environment variable in next JS?

Next.js comes with built-in support for environment variables, which allows you to do the following: Use .env.local to load environment variables. Expose environment variables to the browser by prefixing with NEXT_PUBLIC_

What is .env file in next JS?

Next. js allows you to expose variables using an environment variables file (. env) , with included support for multiple environments.

How do I create an .env file?

In the explorer panel, click on the New File button as shown in the following screenshot: Then simply type in the new file name . env ... Get JavaScript by Example now with the O'Reilly learning platform.


Video Answer


5 Answers

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,
  }
}
like image 137
Dijalma Silva Avatar answered Oct 17 '22 02:10

Dijalma Silva


  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)
like image 37
Safaetul Ahasan Piyas Avatar answered Oct 17 '22 00:10

Safaetul Ahasan Piyas


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:
> [email protected] dev
> next dev

Loaded env from [path]/.env.local
like image 21
BennyBlockchain Avatar answered Oct 17 '22 00:10

BennyBlockchain


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.

like image 15
Miquel Canal Avatar answered Oct 17 '22 01:10

Miquel Canal


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:

  • (Pre-9.4) https://nextjs.org/docs/api-reference/next.config.js/environment-variables (same as this answer)

    Next.js will replace process.env.customKey with 'my-value' at build time.

  • (^9.4) https://nextjs.org/docs/basic-features/environment-variables

    In order to keep server-only secrets safe, Next.js replaces process.env.* with the correct values at build time.

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.

like image 5
Michael Bluth Avatar answered Oct 17 '22 01:10

Michael Bluth