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

Question

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?

Answer 1

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.

Answer 2

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

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 at client-side you had to use next.config.js .

With NEXT_PUBLIC , env variables will be available both client-side and server-side.

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