How to properly set environment variables in Next.js app deployed to Vercel?

by

Simply creating a .env.local (or .env) file with your environment variables should be enough to be picked by Next.js on the server. There’s no need to add anything to your next.config.js.

# .env.local

CLIENT_URL=vxcxsfddfdgd
MAILING_SERVICE_CLIENT_ID=1245785165455ghdgfhasbddahhhhhhhhm
MAILING_SERVICE_CLIENT_SECRET=Rdfvcnsf4263543624362536
MAILING_SERVICE_REFRESH_TOKEN=000000
[email protected]

However, if you need to expose a variable to the browser you have to prefix the variable with NEXT_PUBLIC_.

NEXT_PUBLIC_CLIENT_URL=vxcxsfddfdgd

This will be available on the browser using:

process.env.NEXT_PUBLIC_CLIENT_URL

For more details about environment variables in Next.js refer to https://nextjs.org/docs/basic-features/environment-variables.

The same principle applies to environment variables you create in Vercel (or any other hosting service), adding the prefix will make them available to the browser.

You can add environment variables in Vercel through the Environment Variables page of your Project Settings, that match the variables in your .env.local.

For more details about environment variables in Vercel refer to https://vercel.com/docs/concepts/projects/environment-variables.

More Related Contents:

  1. Environment variables not working (Next.JS 9.4.4)
  2. next.js environment variables are undefined (Next.js 10.0.5)
  3. What’s the difference between exposing environment variables in nextjs through the next.config.js vs with the NEXT_PUBLIC prefix?
  4. How to avoid caching in the app directory of Next.js?
  5. Fetch error when building Next.js static website in production
  6. Read environment variables in Node.js
  7. Internal API fetch with getServerSideProps? (Next.js)
  8. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  9. How to set NODE_ENV to production/development in OS X
  10. Can’t build React/Next project – found page without a React Component as default export (context api file)
  11. In React and Next.js constructor, I am getting “Reference Error: localstorage is not defined”
  12. First Load JS shared by all is rather heavy in next.js
  13. Warning: Function components cannot be given refs
  14. Error: How to serialize data from getStaticProps : Next.js
  15. How to generate dynamic paths for non-default locales in Next.js?
  16. Next.js context provider wrapping App component with page specific layout component giving undefined data
  17. I can’t reference an image in Next.js
  18. How to Set port in next.js
  19. What is the best way to have a fallback image in NextJS?
  20. Next.js: Error: React.Children.only expected to receive a single React element child
  21. Import ES module in Next.js ERR_REQUIRE_ESM
  22. how to add domains to next.config.js for “next/image” while using a plugin
  23. How to deal with NextJS exporting files with .html extension but in there is no .html
  24. how can I use top level “await” in typescript next.js
  25. You’re importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with “use client”
  26. TypeError: Cannot read properties of undefined (reading ‘call’) on Next.js
  27. How to prevent Next.js from instantiating a singleton class/object multiple times?
  28. Next.js app folder: is there some “entry point”? A direct replacement for _app.tsx?
  29. How to fetch data server-side in the app directory of Next.js? Tried getStaticProps but it’s returning undefined
  30. Want to have an event handler for the browser’s back button with next.js

Leave a Comment