Stop 18 · DeploymentTopics · 7/9

Environment Variables

In short

Your API URL is different in development and production, and your secret keys should never sit in Git. Environment variables keep these values outside your code.

Configuration values (API keys, base URLs, secrets) kept outside your codebase and injected at build/runtime — critical for keeping secrets out of version control.

The jaadu reaches for a salt packet on one kitchen shelf, with a steel container on another.

Think of it like this

Same recipe, different kitchen

The recipe says "add the salt from the shelf". In your hostel, that's a small packet. At home, it's mummy's steel dabba. Your code says "use API_URL" and each environment fills in its own value.

Watch it happen

Where each variable ends up

.env.local

Build

JS bundle

Browser

Server

1/5You set NEXT_PUBLIC_API_URL and RAZORPAY_KEY_SECRET in .env.local.

The big ideas

What you need to know

.env files for local work

Put local values in .env.local and add it to .gitignore. Commit a .env.example with dummy values instead.

Public prefixes are public

Variables starting with VITE_ or NEXT_PUBLIC_ are copied into the browser bundle. Anyone can read them.

Baked in at build time

Public variables are written into the JS during the build. Changing one means rebuilding and redeploying.

Secrets stay on the server

Keys without the public prefix are only available to server code, like API routes.

See it in code

Walk through the code

bash

1# .env.local (never commit this file)2NEXT_PUBLIC_API_URL=http://localhost:4000   # reaches the browser3RAZORPAY_KEY_SECRET=xxxx                    # server only4 5# .env.example (commit this one)6NEXT_PUBLIC_API_URL=7RAZORPAY_KEY_SECRET=

1/3A public value. It gets copied into the browser bundle.

In Next.js, only NEXT_PUBLIC_ variables reach the browser. The secret is visible only to server code, which is exactly where it should be used.

Save yourself the pain

Common mistakes

Oops

Naming a secret NEXT_PUBLIC_STRIPE_SECRET so the frontend can use it.

Do this instead

If the browser needs it, it isn't secret. Call your own API route, which uses the secret on the server.

Oops

Committing .env by mistake, then just deleting the file in the next commit.

Do this instead

It's still in Git history. Rotate (regenerate) the key straight away and add .env* to .gitignore.

Your mission

Clean up your secrets

~15 min

Quick check

You change VITE_API_URL in your hosting dashboard but the live site still calls the old URL. Why?

Go deeper

1Move a hardcoded API URL into an environment variable in a project.
2Learn the difference between build-time and runtime environment variables in Next.js.
3Never commit a `.env` file containing real secrets to version control.