I'm trying to deploy a Next.js application on Vercel and I need to set up environment variables (API keys, URLs, etc). I created a .env.local file on my machine that works, but when I push to GitHub and Vercel builds it, the application can't access those variables. How do I pass this securely to Vercel?
The .env.local file never goes to production because Git ignores it by default (it's in .gitignore), so Vercel doesn't have access to those variables when it deploys. You need to set up the variables directly in the Vercel dashboard. Go into your project in the Vercel dashboard, navigate to Settings > Environment Variables and add each variable you need - name and value. If you have variables that only need to be used in development (like local testing), check the "Development" box only. For variables that your Next.js needs to use both on the server and client side, add them without environment restrictions.
For variables that should stay only on the server (like sensitive API keys), add them normally and use them in your code within server-side functions - getServerSideProps, API routes, Server Components. Next.js automatically won't expose these to the browser. If you need to access a variable on the client side, prefix it with NEXT_PUBLIC_ in the name (like NEXT_PUBLIC_API_URL) and it'll be available in the browser, but only use this for non-sensitive data.
After you set everything up in Vercel, push to GitHub again even if you haven't changed anything, and Vercel will rebuild with the variables you've set. If you're using preview deployments (automatic deploys of pull requests), configure the variables to run in those test environments too by going to the "Preview" section in settings. Tip: if you have a lot of variables, copy an entire block from one environment to another instead of adding them one by one.
Go to the Vercel dashboard, open your project, go to Settings > Environment Variables and paste the keys you use in .env.local there. Create a variable for each one (API_URL, API_KEY, whatever you need) and mark which environment each one works in - Development, Preview, Production, or all three. After that when Vercel does the build, it injects those variables into the process and the application can access them via `process.env.VARIABLE_NAME`.
Now, the thing people frequently forget: if you're using variables that can only be accessed on the server (like database passwords or secret API keys), you only need to prefix with `NEXT_PUBLIC_` the ones that go to the client-side. Everything without that prefix stays secure on the server during the build. If you put a sensitive key with `NEXT_PUBLIC_`, it leaks into the JavaScript that the browser downloads - then it's no longer secure. So be careful with that convention, because it's easy to mess up.
One useful tip too is to copy the structure from your .env.local into a file called .env.example (or .env.local.example), remove the actual values, and commit that to Git. That way whoever works on the project knows exactly which variables they need to set up both locally and in Vercel.
Log into answer.
