What's the difference between exposing environment variables in nextjs through the next.config.js vs with the NEXT_PUBLIC prefix?

user_11969592 0
Viewed 2950

According to the nextjs documentation, if I want to expose my environment variables to the browser I can just prefix them with NEXT_PUBLIC in my .env.local file, like so:

NEXT_PUBLIC_VAR=7

However, it looks like I can also expose my environment variables to the browser by using next.config.js, like so:

module.exports = {
  env: {
    PUBLIC_VAR: process.env.PUBLIC_VAR,
  },
}

And this will add to the javascript bundle

What is the difference between these two strategies?

server-side-rendering next.js environment-variables javascript
2 Answers

NEXT_PUBLIC is a new feature added. Before, in order to set up environment variables, we had to set up both server and client, separately.

Environment variables that are placed in the .env file would be available only on the server-side, if you want to make your env variables available on the client-side you had to use next.config.js. We follow the separation of concerns principle here.

But setting env variables for the browser in the next.config was too much unnecessary typing. This was an example in next.config.js for the client side env:

module.exports = {
  env: {
    AUTH0_NAMESPACE: process.env.AUTH0_NAMESPACE,
    BASE_URL: process.env.BASE_URL
  }
}

With NEXT_PUBLIC, env variables will be available both client-side and server-side. env variables that are set with NEXT_PUBLIC will be exposed to the browser. So make sure that you do not expose sensitive data to the browser.

So in summary, adding the prefix NEXT_PUBLIC to your environment variables will have the same effect of exposing to the browser your environment variables as exposing them through next.config.js.

try this:

place this to .env or env.development file. NOT to next.config.js

 MY_VAR=10

then run this:

    console.log("MY var",process.env.MY_VAR);

both inside client component and getServerSideProps function. if you check the browser console, you will get undefined, but on terminal, you will see

MY var 10
user_102628050

The difference between to the two is the one of them uses a .env file whereas the other uses the next.config file. Since Next.js 9.4, loading environment variables with .env files are now supported.

However, to clarify one thing in your question, all environment variables within the .env file don't have to be prefixed with NEXT_PUBLIC, only the ones you want exposed to the browser, any without that prefix will only be accessible on the server.

user_77408780
Related