Next.js Discord

Discord Forum

Deploying on Vercel and Environment Variables

Unanswered
American Bobtail posted this in #help-forum
Open in Discord
American BobtailOP
Hi everyone.

This is my first Next.js project, in fact, my first project on my own without using a full-stack template. I'm trying to understand how the process works:

In a full-stack app, we need environment variables to connect to the database. Since these variables are obviously sensitive, .gitignore makes sure .env is not pushed to the remote public repo.

If you're on Vercel, Vercel takes that very same remote git repo and deploys it. But since the required environment variables haven't been pushed, there's an option to include them in the dashboard.

How do you reference those variables then, with an OR statement - look in the .env file ELSE look in the Vercel dashboard? What does that OR statement look like? If they're in your local .env file, fine, but Vercel won't have that .env file, so will it by default look for those variables in what you've entered in the admin panel? How does the process work exactly?

Any help would be appreciated.
Thanks in advance!

8 Replies

Spectacled bear
Just use process.env.VARIABLE_NAME in your code like normal usage, verel will automatically pick from your local env and vercel env variables.
American BobtailOP
@Spectacled bear thanks!
Quick questions:

- I still declare the variable locally in the .env file, right? By prefixing it with "process." am I instructing Vercel/Next.js to get it locally or, when deployed, to get it from the dashboard, right?

- I don't have to do anything else besides creating the .env file with the environment variables and pasting them in the appropriate Vercel dashboard, right? Nothing else is required, did I get it right?
1.
a. Yes, your local .env file will be used for your local development so yes you still need this. Your production env will be used on local server.
b. Vercel will only use those env variables that you explicitly define the vercel project settings. They do not access your .env file and you should never commit your .env file to git or any online repo.

2.
a. Once you define your local .env file, you can yes head to vercel project where you deployed and upload this very env file there. or you can put each key=value manually if you like
also, each one of env variables that you are seeing must be used on the server unless they do not hold any secret value.

example as domain

these can be normally used on client side but much recommended if you do it server side.
Spectacled bear
@<Milind ツ /> I guess it'll read variables from env files present in code directory even on vercel.
Not sure about that. .env files are never recommended to be pushed online along with code.
If not using git, then yea sure whatever
Spectacled bear
yeah they are not recommended but they'd work