CODEWITHSUNDEEP
javascriptreactjsenvironment-variablesnext.js
Moshe
Moshe

Reputation: 6991

Environment Variables in NextJS are Undefined

I am using the next-auth library which requires the use of environment variables as follows:

  Providers.GitHub({
    clientId: process.env.GITHUB_ID,
    clientSecret: process.env.GITHUB_SECRET,
  }),

However, when I test out next-auth it is not working and it seems to me the reason why is because those variables are not loading properly. As such, I did a little test to see if I can access environment variables in my app and the test showed that I cannot.

This is how the test went:

// .env.local (root level)

NEXT_PUBLIC_ENV_LOCAL_VARIABLE="public_variable_from_env_local"

I then add the following code to my site:

  <h2>test one start</h2>
    {process.env.NEXT_PUBLIC_TEST_ONE}
  <h2>test one end</h2>

  <Spacer />

  <h2>test two start</h2>
    {process.env.TEST_TWO}
  <h2>test two end</h2>

In this case, test one start shows up and test one end shows up, but the environmental variable does NOT show up. The same is true for test two start and test two end.

I did a similar test with console.log - namely:

  console.log("test one", process.env.NEXT_PUBLIC_TEST_ONE)
  console.log("test two", process.env.TEST_TWO)

That turns up as follows:

test one undefined
test two undefined

In short, for whatever reason I seem unable to load environment variables in my nextjs app. Not from next-auth, not in the code and not in a console.log. The variables are undefined and I do not know why.

Any ideas?

Thanks.

Upvotes: 4

Views: 15394

Answers (4)

Canonne Gregory
Canonne Gregory

Reputation: 424

you should create a file .env.local (if your variables is not different on dev or prod) next step, your env variable should be in next.config.js :

env : { EXAMPLE : process.env.URL } // you should write URL env variable in .env.local

NEXTJS take the env variable from your .env.local and it's from next.config that the env variable are taken

Upvotes: 0

QCarter92
QCarter92

Reputation: 21

To be clear, according to the most recent docs, you are supposed to

  1. place the variables in an .env.local file
  2. then config your next.config.js file so it includes an env config referencing your variables like this:

    module.exports = {
     env: {
        secretKey: process.env.your_secret_here,
     },
    }

  1. then you can call the variables on the client-side using the typical process.env.secret_here syntax.
    I may be mistaken but I do believe the NEXT_PUBLIC prefix exposes the env variables to the client-side and should ONLY be done in a dev environment to avoid security issues.

Upvotes: 2

mikep17
mikep17

Reputation: 25

Searching the next.js documentation I found this:

// file: next.config.js

module.exports = {
 env: {
    customKey: 'my-value',
 },
}

// Now you can access process.env.customKey 

// For example, the following line:
// return <h1>The value of customKey is: {process.env.customKey}</h1>

// Will end up being:
// return <h1>The value of customKey is: {'my-value'}</h1>

So it seems, if you are using next.js version at or before 9.4 you place env variables into next.config.js

They also include one warning:

Next.js will replace process.env.customKey with 'my-value' at build time. Trying to destructure process.env variables won't work due to the nature of webpack DefinePlugin.

If you are using version 9.4+ the documentation says you can use .env.local files and prefix env variables with NEXT_PUBLIC_ to have them exposed in the browser.

Of note with this method is: In order to keep server-only secrets safe, Next.js replaces process.env.* with the correct values at build time. This means that process.env is not a standard JavaScript object, so you’re not able to use object destructuring.

Upvotes: 1

brc-dd
brc-dd

Reputation: 12954

.env.* files are loaded when server starts. Hence, any modification in them is not applied unless you restart your dev/prod server.

Just halt the process (Ctrl+C/Z) and re-run next dev/next start to make them work. Note that you may also need to re-build the project (next build) before starting in production mode if you are using them in pages that are statically generated.

Upvotes: 8

Related Questions