JSTAcademy
0 XP
Dashboard
Crash Courses
Environment Variables & Config
10 min
PhD+200 XP
Crash Courses · PhD

Environment Variables & Config

Manage environment variables, Next.js config, and TypeScript paths.
10 min read+200 XP on completionCert: Next.js Crash Course
Tap any word in the text below to start reading from there.

Environment Variables & Config

Environment variable management and Next.js config are critical for secure, portable deployments.

Environment Files (Priority Order)

.env.local         ← highest priority, never committed (secrets)
.env.development   ← dev only
.env.production    ← production only
.env               ← all environments (lowest priority)

Server vs Client Variables

# Server-only (secure — never in browser)
DATABASE_URL=postgresql://...
SUPABASE_SERVICE_ROLE_KEY=eyJ...
AZURE_SPEECH_KEY=abc123

# Browser-exposed (safe — no secrets)
NEXT_PUBLIC_SUPABASE_URL=https://xyz.supabase.co
NEXT_PUBLIC_APP_URL=https://academy.jsupremeconglomerate.online

TypeScript: env validation with zod

// lib/env.ts
import { z } from 'zod'

const envSchema = z.object({
  DATABASE_URL: z.string().url(),
  AZURE_SPEECH_KEY: z.string().min(1),
  NEXT_PUBLIC_SUPABASE_URL: z.string().url(),
})

export const env = envSchema.parse(process.env)
// Throws at startup if any required var is missing

next.config.ts

import type { NextConfig } from 'next'

const config: NextConfig = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: '*.supabase.co' },
    ],
  },
  async headers() {
    return [{
      source: '/api/:path*',
      headers: [
        { key: 'X-Content-Type-Options', value: 'nosniff' },
        { key: 'X-Frame-Options', value: 'DENY' },
      ],
    }]
  },
  async redirects() {
    return [{
      source: '/old-path',
      destination: '/new-path',
      permanent: true,
    }]
  },
}

export default config

tsconfig.json Path Aliases

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
0%