C.W.K.
Stream
Lesson 07 of 09 · published

Environment Variable

~18 min · env, NEXT_PUBLIC_, secrets

Level 0Curious
0 XP0/68 lessons0/11 achievements
0/120 XP to next level120 XP to go0% complete

두 종류의 변수

Prefix가시성
(없음)Server-only. Runtime 에 read. Browser 절대 안 도착.
NEXT_PUBLIC_Build time 에 client bundle 에 inline. DevTools 에서 visible.

Build-time gotcha

NEXT_PUBLIC_* 값이 next build 돌 때 박힘. 같은 Docker image 를 staging 과 prod 에 redeploy 하면 같은 값; running container 에 env var 설정해도 못 바꿔.

Loading 순서

  1. process.env (이미 설정된 값 win)
  2. .env.production.local / .env.development.local
  3. .env.local (test 에선 skip)
  4. .env.production / .env.development
  5. .env

Code

.env.local·bash
# Server-only — 절대 노출 안 함
DATABASE_URL=postgresql://localhost:5432/myapp
AUTH_SECRET=change-me
STRIPE_SECRET_KEY=sk_test_xxx

# Client-safe (build-time inline)
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_STRIPE_KEY=pk_test_xxx
Server vs Client access·tsx
// Server Component — 다 봄
export default async function Page() {
  const dbUrl = process.env.DATABASE_URL;        // ✅
  const appUrl = process.env.NEXT_PUBLIC_APP_URL; // ✅
}

// Client Component — NEXT_PUBLIC_* 만
'use client';
export function Stripe() {
  const key = process.env.NEXT_PUBLIC_STRIPE_KEY; // ✅
  // process.env.DATABASE_URL — 여기선 undefined
}

External links

Exercise

.env file audit. 모든 NEXT_PUBLIC_* variable list 하고 secret 아닌지 확인. Leak 한 거 server-side 로 옮기고 calling code 가 Server Component 에서 read 하게 refactor.

Progress

Progress is local-only — sign in to sync across devices.
이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

댓글 0

🔔 답글 알림 (로그인 필요)
로그인댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.