How To Properly Set Environment Variables In Next.js App Deployed To Vercel?

I am building my web app in Next.js, and I have been doing some tests. What I am doing is to push my code to GitHub and from there deploy the project on to Vercel. I am using Goog

Solution 1:

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
USER_EMAIL_ADDRESS=yesyesyesyesyesyes@gmail.com

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

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.

---

For more details refer to Next.js Environment Variables documentation.