Is NEXT_PUBLIC_.... similar to REACT_APP_....?

Question

Sometimes I want to hide url link while using GET or POST method. Whenever I used react app I would hide the url using REACT_APP_. My question is, if I am using a Next.js APP, could I use NEXT_PUBLIC_URL instead? Does both of these variable work similarly? How are they different?

React APP

axios.get(process.env.REACT_APP_URL)

Next APP

axios.get(process.env.NEXT_PUBLIC_URL)

Answer 1

Your react app runs on the client so there is no way to securely keep variables there.

From the docs

WARNING: Do not store any secrets (such as private API keys) in your React app! Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

The documentation makes it clear by referencing it as:

REACT_APP_NOT_SECRET_CODE

When you are doing process.env.REACT_APP_URL above you are not hiding anything. You requests could well be seen in Chrome Dev Tools.

Environment variables here can help in having different values of the URL for different environments eg: staging-api/dev-api/prod-api. Not for securing API keys or secrets.

Coming to your question are the two same - Yes, NEXT_PUBLIC_ is a good counter part to the react REACT_APP_. It also exposes variables to the browser and can be used for such routes etc.

Next.JS, since it runs on the server side too, gives you a way to secure your variables and not expose the browser. That is by omitting the NEXT_PUBLIC_ (so basically using the naming convention for any generic environment variable).

From the docs:

By default environment variables are only available in the Node.js environment, meaning they won't be exposed to the browser.