Back to Documentation
Deployment
Environment Variables
Securely store API keys, secrets, and configuration values. Environment variables are encrypted and available during build time.
1Adding Environment Variables
Add environment variables through the dashboard:
- Go to Site Settings > Environment Variables
- Click "Add Variable"
- Enter a name (e.g.,
API_KEY) - Enter the value
- Choose the environment (Production, Preview, or Both)
- Click "Save"
Changes take effect on the next deployment.
2Security
Your environment variables are:
- Encrypted at rest: Using AES-256 encryption
- Never logged: Values are redacted in build logs
- Access controlled: Only team members can view/edit
- Not in client bundles: Server-side only by default
Warning: Variables prefixed with NEXT_PUBLIC_ or VITE_ are exposed to the browser!
3Framework Prefixes
Different frameworks have different conventions for client-side variables:
Next.js:
NEXT_PUBLIC_*
Vite:
VITE_*
Create React App:
REACT_APP_*
Gatsby:
GATSBY_*
4Using in Code
Access environment variables in your code:
// Node.js / Server-side
const apiKey = process.env.API_KEY;
// Next.js (client-side)
const publicKey = process.env.NEXT_PUBLIC_API_KEY;
// Vite (client-side)
const key = import.meta.env.VITE_API_KEY;
5Bulk Import
Import multiple variables from a .env file:
- Go to Site Settings > Environment Variables
- Click "Import .env"
- Paste your
.envfile contents or upload the file - Review the variables
- Click "Import"
Never commit: Add .env to your .gitignore file!