1. 개념 요약

• Next.js에서 환경변수는 프로젝트 내에서 민감한 정보나 설정값을 관리하기 위해 사용한다.
• 환경변수는 .env 파일이나 시스템 환경변수로 정의하며, 빌드 시점과 런타임 시점에 따라 사용할 수 있는 범위가 다르다.

2. 배경 지식

• 웹 애플리케이션은 API 키, DB 접속 정보 등 보안이 필요한 설정값을 코드에 직접 노출하지 않기 위해 환경변수를 사용한다.
• Next.js는 환경변수를 클라이언트와 서버 각각에서 안전하게 사용할 수 있도록 별도의 규칙과 접두사를 제공한다.
• 환경변수는 .env.local, .env.development, .env.production 등 환경별로 다르게 설정 가능하다.

3. 상세 설명

3-1. 환경변수 파일 생성과 기본 사용법

• 프로젝트 루트에 .env.local 파일을 만들고 환경변수를 정의한다.

API_SECRET_KEY=abcdef123456
NEXT_PUBLIC_API_URL=https://api.example.com

• NEXT_PUBLIC_ 접두사가 붙은 변수는 클라이언트와 서버 모두에서 접근 가능하다.
• 접두사가 없는 변수는 서버에서만 접근 가능하다.
  • ex. API routes, Server Component

3-2. 환경변수 사용 위치 및 접근 방법

• 서버 코드에서 process.env.API_SECRET_KEY 와 같이 접근 가능하다.

• 클라이언트 코드에서 process.env.NEXT_PUBLIC_API_URL로 접근한다.

  단, NEXT_PUBLIC_이 붙은 변수만 클라이언트에서 읽을 수 있다.