[환경설정] 환경변수로 API 키 관리하기

왜 환경 변수로 관리해야 할까?

• API 키는 절대 코드에 직접 작성하면 안됨!!
  - GitHub에 푸시되면 외부에 노출될 수 있어 보안에 심각한 문제 발생
• .env 파일을 사용하면 민감한 정보(API 키, DB 주소 등(를 소스 코드와 분리할 수 있어 보안성과 유지보수성이 향상됨

사용 방법

1. .env.local 파일 생성

• .env.local은 Git에 자동으로 포함되지 않고, 로컬에서만 사용하는 환경 변수 파일임

2. 환경 변수 설정

• NEXT_PUBLIC_ 접두사 : 클라이언트에서 사용 가능한 변수
• 클라이언트에서 사용하는 API 키는 반드시 NEXTPUBLIC을 붙여야 Next.js에서 빌드시 인식됨

NEXT_PUBLIC_API_BASE_URL=ypur_api_URL
NEXT_PUBLIC_KAKAO_API_KEY=your_kakao_javascript_key

3. .env 파일 Git에서 제외하기

• .gitignore 파일에 아래가 포함되어 있는지 확인하기

.env
.env.local

4. 코드에서 사용하는 방법

• process.env.NEXT_PUBLIC... 형태로 접근
• 서버 컴포넌트나 API 라우트에서는 NEXT_PUBLIC_ 없이도 사용 가능

const kakakokey=process.env.NEXT_PUBLIC_KAKAO_API_KEY;

주의할 점

• Vercel에 빌드할 때 따로 환경변수 추가해주기!!!