Going to production · Lesson 15 of 16

Environment variables and deploying to Vercel

NEXT_PUBLIC_, server-only, preview deployments and production.

9 minutes2 games

Keys and settings go in environment variables (.env.local on your machine, Vercel's settings in production), not in code. The key rule:

DATABASE_URL, SUPABASE_SERVICE_ROLE_KEY: no prefix, so they stay server-only.
NEXT_PUBLIC_SUPABASE_URL: this prefix means "bake it into the JavaScript sent to the browser", so anyone can see it.

TypeScript

# .env.local  (never commit this file; it's in .gitignore)
NEXT_PUBLIC_SUPABASE_URL=https://xyz.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...        # public by design; RLS protects the data
SUPABASE_SERVICE_ROLE_KEY=eyJ...            # bypasses RLS: server only!
GROQ_API_KEY=gsk_...

// lib/supabase/admin.ts
import "server-only"           // importing this file from a client component fails the build
export const admin = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!)

Deploying to Vercel

git push to a branch

Vercel builds it

a Preview URL per branch (for review and testing)

merge to main → Production on your domain

Vercel (the company behind Next.js) connects to your repo: every push creates a preview deployment with its own URL to test before anything reaches users, and merging to main creates a production deployment. Environment variables have separate values per environment (Development, Preview, Production), so previews can use a test database.

Spot the bug

This configuration has a serious security problem. Which line?

Exercise

Write publicEnv(env) returning only the variable names that reach the browser (those starting with NEXT_PUBLIC_), alphabetically, one per line.

Expected output:

NEXT_PUBLIC_SITE_NAME
NEXT_PUBLIC_SUPABASE_URL

JavaScript

function publicEnv(env) {
  return []
}

const env = {
  SUPABASE_SERVICE_ROLE_KEY: "secret",
  NEXT_PUBLIC_SUPABASE_URL: "https://xyz.supabase.co",
  GROQ_API_KEY: "secret",
  NEXT_PUBLIC_SITE_NAME: "SeaCode",
}
console.log(publicEnv(env).join("\n"))

Learn more from

Played 0 of 2 games

Next.js