# Environment Variables Migration Guide

## Vite → Next.js Environment Variable Changes

When migrating from Vite to Next.js, all environment variables need to be renamed:

### Required Changes

| Old (Vite) | New (Next.js) | Purpose |
|------------|---------------|---------|
| `VITE_WREN_API_TOKEN` | `NEXT_PUBLIC_WREN_API_TOKEN` | Wren Climate API authentication token |
| `VITE_API_BASE_URL` | `NEXT_PUBLIC_API_BASE_URL` | Backend API base URL |
| `VITE_STRIPE_PUBLISHABLE_KEY` | `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` | Stripe payment gateway public key |
| `VITE_FORMSPREE_CONTACT_ID` | `NEXT_PUBLIC_FORMSPREE_CONTACT_ID` | Formspree contact form ID (if still used) |
| `VITE_FORMSPREE_OFFSET_ID` | `NEXT_PUBLIC_FORMSPREE_OFFSET_ID` | Formspree offset form ID (if still used) |

### Updated .env File

Your `.env` file should now look like this:

```env
# Wren Climate API
NEXT_PUBLIC_WREN_API_TOKEN=35c025d9-5dbb-404b-85aa-19b09da0578d

# Backend API
NEXT_PUBLIC_API_BASE_URL=http://localhost:3001

# Stripe (add when needed)
# NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...

# Formspree (if still using)
# NEXT_PUBLIC_FORMSPREE_CONTACT_ID=xkgovnby
# NEXT_PUBLIC_FORMSPREE_OFFSET_ID=xvgzbory
```

### Docker Environment Variables

In your Docker deployment (via `docker-compose.yml` or environment injection), update:

```yaml
environment:
  - NEXT_PUBLIC_WREN_API_TOKEN=${WREN_API_TOKEN}
  - NEXT_PUBLIC_API_BASE_URL=${API_BASE_URL}
  - NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=${STRIPE_PUBLISHABLE_KEY}
```

### Code Changes Made

The following file has been updated to use Next.js environment variables:

- **`src/utils/config.ts`**: Changed from `import.meta.env.VITE_*` to `process.env.NEXT_PUBLIC_*`

### Important Notes

1. **NEXT_PUBLIC_ prefix is required** for client-side environment variables in Next.js
2. The `next.config.mjs` file maps these variables for compatibility
3. Server-side only variables (like API secrets) should NOT have the `NEXT_PUBLIC_` prefix
4. The app will work without these variables but will fall back to default/demo modes

### Verification

To verify your environment variables are loaded correctly:

```bash
# Development
npm run dev

# Check console for:
# "Config: {wrenApiKey: '[REDACTED]', isProduction: false}"

# If you see "Missing required environment variable", update your .env file
```

### Production Deployment

For production deployments:

1. Update your `.env` file with `NEXT_PUBLIC_*` variables
2. If using Docker, update your `docker-compose.yml` or environment scripts
3. If using Gitea Actions, update CI/CD environment variables
4. Rebuild the application: `npm run build`

### Backward Compatibility

The `next.config.mjs` file includes fallback logic to support both naming conventions during the transition period, but you should update to the new names as soon as possible.