🌍 Environment Variables in Next.js

✅ This component demonstrates how to use environment variables in client-side.


🚀 Public API URL:

⚠️ Environment variable not found


// 1️⃣ .env.local file (root of your project)
NEXT_PUBLIC_API_URL=https://api.example.com

// 2️⃣ Accessing in a Client Component
const publicApiUrl = process.env.NEXT_PUBLIC_API_URL;

📌 Important Notes:

  • Only environment variables starting with NEXT_PUBLIC_ are accessible in client-side components.
  • Restart your server after changing any .env.local values.
  • Never expose sensitive variables (like API keys without auth) to client side.