Back

Environment variables for keys

Keep API keys in environment variables, not in your code. In Next.js, only variables starting with NEXT_PUBLIC_ reach the browser. Anything secret should NOT have that prefix and should only be used on the server.

# .env.local
GEMINI_API_KEY=secret123                       # server only
NEXT_PUBLIC_SITE_URL=https://myapp.vercel.app  # safe in browser

// Server (API route / server component) - OK
const key = process.env.GEMINI_API_KEY

// Client component - this is undefined, which is good
const key = process.env.GEMINI_API_KEY

# Remember to add the same variables in Vercel -> Settings -> Environment Variables

Roadmap