As I develop my web app in Next.js, I have been conducting tests to ensure its functionality. Currently, my process involves pushing the code to GitHub and deploying the project on Vercel.
Incorporating Google APIs dependencies required me to obtain a Client ID and Client Secret for sending emails using node-mailer from the client side through a contact form. While everything functions correctly on localhost, issues arise when deploying to Vercel due to environment variables.
In attempting Solutions A and B
Solution A
I created a .env.local file and defined my variables there, then accessed them in next.config.js where I confirmed their accessibility throughout the application (as indicated by console logs).
.env.local
env:{
CLIENT_URL:'vxcxsfddfdgd',
MAILING_SERVICE_CLIENT_ID:'1245785165455ghdgfhasbddahhhhhhhhm',
MAILING_SERVICE_CLIENT_SECRET:'Rdfvcnsf4263543624362536',
MAILING_SERVICE_REFRESH_TOKEN:'000000',
USER_EMAIL_ADDRESS:'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="740d11070d11070d11070d11070d11070d1107341319151d185a171b19">[email protected]</a>',
}
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,
}
}
Despite implementing Solution A as outlined above, email sending fails to function both on localhost and Vercel.
Solution B
I inserted my variables directly into next.config.js, added it to .gitignore, and pushed 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:'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98ebfdf1ebfdf1faf9faf9d8fff5f9f1f4b6fbf7f5">[email protected]</a>',
}
}
Solution B operates effectively on localhost. However, if I introduce an environment variable on Vercel as depicted here, the email transmission ceases to work.
What steps should I take to ensure proper functionality in this scenario?