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 Google APIs dependencies which require some Client ID and Client secret for me to be able to send emails using node-mailer from my client side to inbox (I'm doing this via a contact form).

However, on localhost everything is working fine but when I deploy onto Vercel, I am not able to make my contact form send mails (an issue that has to do with environment variables).

I tried Options A and B

Option A

Created a .env.local, added my variables there, then accessed them in next.config.js as shown in the code below (console log shows that I can access the variables anywhere on my app)

.env.local

env:{
    CLIENT_URL:'vxcxsfddfdgd',
    MAILING_SERVICE_CLIENT_ID:'1245785165455ghdgfhasbddahhhhhhhhm',
    MAILING_SERVICE_CLIENT_SECRET:'Rdfvcnsf4263543624362536',
    MAILING_SERVICE_REFRESH_TOKEN:'000000',
    USER_EMAIL_ADDRESS:'[email protected]',        
}

next.config.js

module.exports = {
  env:{
    CLIENT_URL: process.env.CLIENT_URL,
    MAILING_SERVICE_CLIENT_ID: process.env.MAILING_SERVICE_CLIENT_ID,
    MAILING_SERVICE_CLIENT_SECRET: process.env.MAILING_SERVICE_CLIENT_SECRET,
    MAILING_SERVICE_REFRESH_TOKEN: process.env.MAILING_SERVICE_REFRESH_TOKEN,
    USER_EMAIL_ADDRESS: process.env.USER_EMAIL_ADDRESS,  
  }
}

If I do like Option A as per above, then send emails does not work on localhost neither does it work on Vercel.

Option B

I put my variables in next.config.js as below add the next.config.js to .gitignore then push to GitHub.

module.exports = {
  env:{
    CLIENT_URL:'http://localhost:3000',
    MAILING_SERVICE_CLIENT_ID:'7777777777777777777777',
    MAILING_SERVICE_CLIENT_SECRET:'R123456789',
    MAILING_SERVICE_REFRESH_TOKEN:'1123456789',
    USER_EMAIL_ADDRESS:'[email protected]',
    
  }
}

Option B works on localhost, but if I add environment variable on Vercel as shown in here then send mail does not work.

How can I set this to work properly for me?

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.