환경 변수 관리와 배포 전략

실무 배포 환경에서는 보안이 생명입니다. Next.js는 .env.local을 통해 서버 전용 시크릿(DB 비밀번호 등)과 클라이언트 노출 변수(API Endpoint 등)를 완벽히 분리 관리합니다.

접두어 NEXT_PUBLIC_이 붙은 변수만이 브라우저 번들에 포함되며, 나머지 변수는 오직 안전한 Node.js 서버 환경에서만 접근 가능합니다. Vercel 플랫폼과 결합하면 브랜치별 환경 변수 구성과 Edge Network 캐싱을 손쉽게 세팅할 수 있습니다.

// ==========================================
// 📂 app/lib/db.ts (서버 환경 전용)
// ==========================================
import mysql from 'mysql2/promise'

export const dbPool = mysql.createPool({
  host: 'db.example.com',
  // 서버에서만 접근 가능하므로 안전합니다! 
  // (클라이언트 번들에는 절대 포함되지 않습니다)
  password: process.env.DATABASE_PASSWORD, 
})


// ==========================================
// 📂 app/components/PaymentForm.tsx (클라이언트 컴포넌트)
// ==========================================
'use client'

import { loadStripe } from '@stripe/stripe-js'

export function PaymentForm() {
  // NEXT_PUBLIC_ 접두사가 있으므로 브라우저용 JS 번들에 포함됩니다.
  // 빌드 시점에 문자열 "pk_test_12345" 로 자동 치환(Replace)됩니다.
  const handlePayment = async () => {
    const stripe = await loadStripe(process.env.NEXT_PUBLIC_STRIPE_KEY!)
    // 결제 로직 수행...
  }

  return <button onClick={handlePayment}>결제하기</button>
}

// 💡 실무 베스트 프랙티스
// Next.js 환경 변수는 런타임에 읽어오는 게 아니라 "빌드 타임"에 코드에 박힙니다.
// 따라서 클라이언트 변수를 변경했다면 반드시 프로젝트를 다시 빌드(Re-build)해야 합니다!