Environment variables

How to configure environment variables in the Saas UI Next.js starter kit.

The Saas UI Next.js starter kit uses environment variables to configure the application. This allows you to separate configuration from your codebase and keep sensitive information secure.

Configuration#

We recommend NEVER to check in any .env files in order to prevent leaking secrets into your Git repository. This is unlike recommendations by Next.js, but we believe it is the better/safer approach.

Environment variables should always be configured using your CI/CD provider. For example, GitHub Actions, Vercel, etc. Never store secrets in your repository.

Run yarn turbo gen env to generate a new .env file.

Alternatively, you can copy the .env.example file to .env and fill in the values.

The gen command will create a symlink from .env to apps/web/.env. This will not work on Windows and you create a link or copy the .env to apps/web/.env yourself.

# Windows (PowerShell)
mklink apps/web/.env .env

# The public URL of the application
APP_URL=http://localhost:3000

# Default plan id for new accounts.
# Plans are configured in `packages/config/billing.config.ts`.
DEFAULT_PLAN_ID=free@1

# Email
# The email address that will be used to send emails from the application.
# This domain must be verified in your email provider.
EMAIL_FROM="hello@saas-ui.dev"

# Resend (default email provider)
# You can find this value in your Resend project settings.
RESEND_API_KEY=

# Database
# Uses a local docker instance by default.
DATABASE_URL=postgres://admin:admin@localhost:5432/dev

# Auth.js
AUTH_SECRET=

# Stripe (default payment provider)
# You can find these values in your Stripe dashboard, under developer settings.
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=

Using environment variables#

All environment variables are defined using a Zod schema in packages/env/env.ts. This allows us to validate the environment variables and give us type-safety / auto-completion in our codebase.

You can import environment variables from env, only NEXT_PUBLIC_ prefixed variables are exposed to the client.

import { env } from 'env'

console.log(env.DATABASE_URL)