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

Question

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?

Answer 1

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,
  }
}

Answer 2

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/

3. Use with prefix process.env

process.env.NEXT_PUBLIC_API_URL

4. Stop the server and restart it:

npm run dev

5. I hope it works. This solution for latest version of nextJs (above 9)

Answer 3

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

Answer 4

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 .

Answer 5

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.

Answer 6

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

Answer 7

create .env.local file in the root file and next.js will automatically add those as env variables. syntax in this file should be like this:

DJANGO_API_URL=http://localhost:8000
BASE_URL=http://localhost:3000

this file already in.gitignore

Answer 8

In my case, Im pasting REACT_APP_API_URL instead of NEXT_PUBLIC_API_URL.

Answer 9

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;