FrontendGetting Started
Environment Variables
Required and optional environment variables for the frontend.
Required Variables
| Variable | Description | Example |
|---|---|---|
NEXT_PUBLIC_BACKEND_API_URL | Backend API base URL | http://localhost:8000 |
AUTH_SECRET | NextAuth.js secret for JWT signing | Random 32+ char string |
Optional Variables
| Variable | Description | Default |
|---|---|---|
NEXT_PUBLIC_APP_NAME | Application display name | HyperSaaS |
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY | Google Maps for location features | — |
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY | Stripe publishable key | — |
Setup
# Copy the example file
cp .env.example .env.local
# Edit with your values
nano .env.localExample .env.local:
# Backend API
NEXT_PUBLIC_BACKEND_API_URL=http://localhost:8000
# NextAuth
AUTH_SECRET=your-random-secret-at-least-32-characters-long
# Google Maps (optional — for location features in chat)
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=AIza...
# Stripe (optional — for billing)
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...How Variables Are Used
Backend API URL
Used by getApiURL() in lib/utils.ts to construct all backend API calls:
export function getApiURL(): string {
return process.env.NEXT_PUBLIC_BACKEND_API_URL ?? "http://localhost:8000";
}Auth Secret
Used by NextAuth.js to sign and encrypt JWT tokens. Generate a secure value:
openssl rand -base64 32Public vs Private
Variables prefixed with NEXT_PUBLIC_ are exposed to the browser. All others are server-only.
| Prefix | Available in | Use for |
|---|---|---|
NEXT_PUBLIC_ | Server + Client | API URLs, public keys, feature flags |
| No prefix | Server only | Secrets, API keys, internal config |