[NEXT.js] 환경변수 사용

React, Next.js 등 프론트엔드 환경에서 환경 변수 사용하기
Next.js를 예로 들면, 프론트엔드에서 API 키를 사용할 때는 보안을 유의해야 합니다. 일반적으로 클라이언트 측에서 API 키를 직접 사용하는 것은 권장되지 않습니다. 그러나 퍼블릭 API(예: 맵 서비스, 공개 데이터 API 등)의 경우 Next.js에서는 다음과 같이 환경 변수를 설정하고 사용할 수 있습니다.

.env.local 파일 생성: 프로젝트 루트에 .env.local 파일을 생성하고, 퍼블릭 API 키를 다음과 같이 저장합니다.

NEXT_PUBLIC_API_KEY=your_public_api_key_here

Next.js에서는 NEXTPUBLIC 접두사가 붙은 환경 변수를 클라이언트 사이드에서 안전하게 사용할 수 있도록 합니다.

환경 변수 사용: 환경 변수를 불러와서 사용합니다.

import axios from 'axios';

const fetchData = async () => {
  try {
    const response = await axios.get('https://api.example.com/data', {
      headers: {
        'Authorization': `Bearer ${process.env.NEXT_PUBLIC_API_KEY}`
      }
    });
    console.log(response.data);
  } catch (error) {
    console.error('API 요청 중 오류 발생:', error);
  }
};

export default function Component() {
  return (
    <div>
      <button onClick={fetchData}>데이터 불러오기</button>
    </div>
  );
}

이렇게 환경 변수를 사용하여 API 키와 같은 민감한 정보를 코드에 직접 하드코딩하지 않고 관리할 수 있습니다. 이 방법은 보안을 유지하고, 개발과 프로덕션 환경에서의 설정 변경을 용이하게 합니다.