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

by

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

More Related Contents:

  1. Internal API fetch with getServerSideProps? (Next.js)
  2. How to properly set environment variables in Next.js app deployed to Vercel?
  3. Error: How to serialize data from getStaticProps : Next.js
  4. Environment variables not working (Next.JS 9.4.4)
  5. How to use cookie inside `getServerSideProps` method in Next.js?
  6. next.js environment variables are undefined (Next.js 10.0.5)
  7. Window is not defined in Next.js React app
  8. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  9. In React and Next.js constructor, I am getting “Reference Error: localstorage is not defined”
  10. Warning: Function components cannot be given refs
  11. How to access route parameter inside getServerSideProps in Next.js?
  12. Next.js ISR ( Incremental Static Regeneration ), how to rebuild or update a specific page manually or dynamically before the interval/ISR time start?
  13. How to generate dynamic paths for non-default locales in Next.js?
  14. Next.js context provider wrapping App component with page specific layout component giving undefined data
  15. unable to deploy next js to azure
  16. What is the best way to have a fallback image in NextJS?
  17. Next.js: Error: React.Children.only expected to receive a single React element child
  18. Import ES module in Next.js ERR_REQUIRE_ESM
  19. Custom _app and _document get ignored when moving files to src/pages folder in Next.js
  20. how to add domains to next.config.js for “next/image” while using a plugin
  21. React JS Server side issue – window not found
  22. How to deal with NextJS exporting files with .html extension but in there is no .html
  23. Is it possible to put test files under pages directory in Next.js?
  24. TypeError [ERR_INVALID_URL]: Invalid URL using Next-auth only in Production
  25. TypeError: Cannot read properties of undefined (reading ‘call’) on Next.js
  26. Next.js app folder: is there some “entry point”? A direct replacement for _app.tsx?
  27. How to avoid caching in the app directory of Next.js?
  28. How to fetch data server-side in the app directory of Next.js? Tried getStaticProps but it’s returning undefined
  29. Want to have an event handler for the browser’s back button with next.js
  30. Next.js, getStaticProps not working with component but does with page

Leave a Comment