Hosted Environment Variables

Choose the environment you're setting up

On Vercel, open your app's project and go to Settings → Environment Variables. Select Production for your first deployment on the stable app domain. Production is the hosting target; you'll still use test payments while you set it up.

When you add Preview later, use the same variable names. Change the values to match that preview's domain and providers:

You can scope Vercel Preview values to a branch. Choose a stable preview origin and configure its Auth redirects and Stripe webhook for that origin too.

For Docker or VPS, use the Docker environment steps: save NEXT_PUBLIC_* values in .env.build before building the image and server-only values in .env.runtime for the running container. Rebuild whenever the public values change.

Shared environment example

Use this block to check the names and sections in your saved settings. If you're configuring a new target, copy it into your hosting provider's settings and replace its placeholders using the linked setup guides below.

The commented Resend entries are used when you switch app email to real delivery.

# App origin
NEXT_PUBLIC_APP_URL=https://yourdomain.com

# Supabase Auth and database
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=...
SUPABASE_SECRET_KEY=...
DATABASE_URL=postgresql://postgres.xxx:[password]@aws-0-us-east-1.pooler.supabase.com:6543/postgres?sslmode=require

# Stripe settings shared by lifetime and subscription billing
NEXT_PUBLIC_STRIPE_MODE=test
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

# Lifetime billing IDs: Individual and Team (one-time payments)
# Configure these when the lifetime tiers are present in pricing.config.ts.
# Individual
NEXT_PUBLIC_STRIPE_INDIVIDUAL_PRODUCT_ID=prod_replace_me
NEXT_PUBLIC_STRIPE_INDIVIDUAL_PRICE_ID=price_replace_me

# Team
NEXT_PUBLIC_STRIPE_TEAM_PRODUCT_ID=prod_replace_me
NEXT_PUBLIC_STRIPE_TEAM_PRICE_ID=price_replace_me

# Subscription billing IDs: Starter, Pro, and Business (monthly/yearly)
# Configure these when the subscription tiers are present in pricing.config.ts.
# Starter
NEXT_PUBLIC_STRIPE_STARTER_PRODUCT_ID=prod_replace_me
NEXT_PUBLIC_STRIPE_STARTER_PRICE_ID_MONTHLY=price_replace_me
NEXT_PUBLIC_STRIPE_STARTER_PRICE_ID_YEARLY=price_replace_me

# Pro
NEXT_PUBLIC_STRIPE_PRO_PRODUCT_ID=prod_replace_me
NEXT_PUBLIC_STRIPE_PRO_PRICE_ID_MONTHLY=price_replace_me
NEXT_PUBLIC_STRIPE_PRO_PRICE_ID_YEARLY=price_replace_me

# Business
NEXT_PUBLIC_STRIPE_BUSINESS_PRODUCT_ID=prod_replace_me
NEXT_PUBLIC_STRIPE_BUSINESS_PRICE_ID_MONTHLY=price_replace_me
NEXT_PUBLIC_STRIPE_BUSINESS_PRICE_ID_YEARLY=price_replace_me

# Email delivery for hosted testing
EMAIL_DELIVERY_MODE=test_capture
TEST_EMAIL_CAPTURE_TOKEN=...

# Real email delivery at launch: set EMAIL_DELIVERY_MODE=real
# RESEND_API_KEY=re_...
# RESEND_FROM_EMAIL=onboarding@yourdomain.com

Check your existing configuration

The Vercel guide already explains how to save your hosted values. Return to the relevant section if something is missing:

• App origin, Supabase keys/database, and email settings: Add the Production environment.
• Supabase redirects and Stripe webhook secret: Configure provider callbacks.
• Billing IDs: Stripe catalog.
• Auth email delivery: SMTP configuration.

The shipped src/config/pricing.config.ts defines lifetime and subscription tiers. Keep values for the tiers still defined there; omitting env variables does not disable them. Live mode requires your own IDs for every retained tier.

Save the values and check the target

Review the entries already saved for your selected environment. If you've added or corrected a value, save that change to the same target. Mark database URLs, secret keys, webhook secrets, and the capture token as sensitive. Keep their values out of commits, logs, and support messages.

Before you deploy, check that:

• Every placeholder in the sections you're using has been replaced.
• The app origin matches this target's Supabase Auth redirects and Stripe webhook destination.
• Stripe mode, keys, and catalog IDs all use the same account and mode.
• Capture mode has its server token; real email has both Resend values.

You're ready to deploy with these saved values. Saving settings does not update an existing deployment or prove that the providers connect; follow the deployment guide's checks on the resulting app.

After changing any NEXT_PUBLIC_* value, rebuild and redeploy. Next.js includes these public values in browser JavaScript during the build, so changes to the origin, public keys, Stripe mode, or IDs need a new build. Keep server credentials unprefixed. Next.js public environment variables.