When I first started building projects in Next.js, I used to hardcode my API URLs directly into the code. It worked fine locally — until I deployed the project to production and nothing connected correctly. That was when I discovered how powerful and essential environment variables are in managing different environments safely.

In my current setup, the Next.js frontend is deployed on Vercel, while my PHP backend API runs on a cPanel subdomain. These are two separate environments — so having hardcoded URLs would mean manually editing them every time I move from local development to live deployment. That’s not only inefficient — it’s risky.

With environment variables, I can define different API base URLs in files like .env.local (for development) and in Vercel’s dashboard (for production). My app reads these values dynamically, so the correct API endpoint is always used automatically — no need to touch the code.

It also keeps sensitive information (like API keys, database credentials, or tokens) out of the source code, which is a crucial security practice. Plus, it makes collaborating or scaling easier — other developers can simply set their own .env file without affecting production.

So, if you’re building a project with multiple environments like mine — Vercel for the frontend and PHP backend on a cPanel subdomain — using environment variables isn’t optional. It’s one of those small things that make your project clean, professional, and secure.