[Next.js] 환경변수를 사용하는 간단한 방법

Next.js 애플리케이션을 확장 가능하고 유지보수가 용이하게 구축하는 데 중요한 측면 중 하나는 환경변수를 관리하는 것이다. 이 포스트에서는 process.env.NODE_ENV, .env 파일, NEXT_PUBLIC_ 접두사 등을 포함하여 환경변수를 효과적으로 활용하는 방법을 알아본다.

process.env.NODE_ENV

Next.js에서 process.env.NODE_ENV를 사용하면 현재 Node.js 환경변수에 접근할 수 있다.

// NODE_ENV 변수에 접근
const env = process.env.NODE_ENV;
console.log(`Environment: ${env}`);
// 출력: Environment: development

위 코드는 현재 노드 환경에 접근하여 출력한다. 대부분의 경우 development, production 또는 test 중 하나일 것이다.

.env 파일: 환경변수 정의

Next.js는 개발의 다양한 목적과 단계를 위해 여러 .env 파일을 제공하여 환경변수를 정의한다. 각 파일의 개요는 다음과 같다:

• .env: 모든 환경에서 로드되는 기본 파일이다.
• .env.development: 개발 환경을 위한 파일로, 개발 목적으로 변수를 설정할 수 있다.
• .env.production: production 환경에서 필요한 변수를 정의하기 위한 파일이다.
• .env.test: 테스트 환경을 위한 환경변수를 포함하는 파일이다.
• .env.local: .env.local 파일은 테스트 환경을 제외하고 로컬 수준에서 변수를 재정의할 수 있다.

우선 순위와 중복 키

변수가 여러 .env 파일에서 정의되는 경우, Next.js는 특정 순서에 따라 파일을 로드하여 어떤 값을 사용할지 결정한다. 중복 키가 있는 경우, 더 높은 우선 순위의 파일이 다른 값으로부터 값을 덮어쓴다.

1. 로컬 오버라이드: .env.local 파일은 최고의 우선 순위(1)를 가지며 테스트 환경을 제외한 로컬 수준에서 변수를 오버라이드할 수 있다.
2. 특정 환경 파일: 다음 우선 순위(2)는 .env.development, .env.production, .env.test와 같은 특정 환경 파일이다. 이 파일은 각각의 환경에 대한 변수를 정의하는 데 사용된다.
3. 기본 파일: 마지막으로, .env 파일은 가장 낮은 우선 순위(3)를 가지며 모든 환경에서 로드되는 환경 변수를 정의하는 데 사용된다.

예를 들어, API_URL 키에 대해 .env 파일에 다음과 같은 정의가 있다고 가정해보자

Next.js가 각각의 환경에서 이 파일들을 어떻게 로드하여 API_URL 값을 결정 하는지 알아보자.

Development 환경에서

1. .env.local이 존재하고 API_URL을 정의하면 해당 값이 사용된다.
2. 그렇지 않으면 .env.development에서의 값이 사용된다.
3. .env.development에서 정의되지 않았다면 .env에서의 값이 사용된다.

Production 환경에서

1. .env.local이 존재하고 API_URL을 정의하면 해당 값이 사용된다.
2. 그렇지 않으면 .env.production에서의 값이 사용된다.
3. .env.production에서 정의되지 않았다면 .env에서의 값이 사용된다.

Test 환경에서

1. .env.local이 존재하고 API_URL을 정의하면 해당 값이 사용된다.
2. 그렇지 않으면 .env.test에서의 값이 사용된다.
3. .env.test에서 정의되지 않았다면 .env에서의 값이 사용된다.

브라우저를 위한 환경변수 번들링

Next.js에서 환경변수는 브라우저에 번들링되고 노출되어 클라이언트 측 코드가 특정 구성 또는 설정에 접근할 수 있게 할 수 있다. 이 기능은 클라이언트 측 라이브러리나 서비스를 구성할 필요가 있을 때 특히 유용한다.

그러나 브라우저에 노출되는 변수에 주의해야 할 점은 이것이 보안 위험을 초래할 수 있다는 것이다. 비밀 키나 비밀번호와 같은 민감한 정보는 브라우저에서 접근 가능한 변수에 포함되어서는 안 된다.

NEXT_PUBLIC_ 접두사 사용

환경변수를 브라우저에 노출하려면 변수 앞에 NEXT_PUBLIC_을 접두사로 붙이면 된다. 예를 들어 API 엔드포인트 URL을 브라우저에서 사용 가능하게 하려면 .env 파일에서 아래와 같이 정의할 수 있다.

NEXT_PUBLIC_VAR=value

이 변수는 자바스크립트 번들에 인라인되며 클라이언트 측 코드의 어디에서나 process.env.NEXT_PUBLIC_VAR을 사용하여 접근할 수 있다.

코드 예시

다음은 이 변수를 React 컴포넌트에서 어떻게 사용할 수 있는지에 대한 간단한 예시이다.

// NEXT_PUBLIC_ 접두사가 있는 변수에 접근
const publicVar = process.env.NEXT_PUBLIC_VAR;
console.log(`Public Variable: ${publicVar}`);
// 출력: Public Variable: value

보안 고려사항

앞서 언급했듯이, 브라우저에 환경변수를 노출하는 것은 보안에 대한 신중한 고려가 필요한다. NEXT_PUBLIC_ 접두사로 시작하는 어떤 변수라도 클라이언트 측 코드에 포함되고 웹 페이지의 소스 코드를 볼 수 있는 사람에 의해 접근할 수 있다.

비밀 키나 개인 데이터와 같은 민감한 정보를 NEXT_PUBLIC_ 접두사를 사용하여 노출해서는 안 된다. 이렇게 하면 악의적인 사용자에게 이 정보가 노출될 수 있으며, 응용 프로그램의 보안에 중대한 위험이 될 수 있다.

Next.js에서 환경변수를 관리하는 것은 견고한 애플리케이션을 구축하기 위해 필수적이다. 다양한 .env 파일은 환경별 구성에 대한 유연성과 통제를 제공한다. 이러한 파일의 우선 순위와 적절한 사용법을 이해함으로써 Next.js 프로젝트의 효율성과 유지보수성을 향상시킬 수 있다.

자주 묻는 질문

1. Next.js에서 다른 .env 파일은 무엇인가?
   다른 단계를 위한 환경변수를 정의합니다: 기본값은 .env, 개발은 .env.development, 생산은 .env.production, 테스트는 .env.test, 로컬 재정의는 .env.local이다.
2. 환경변수를 브라우저에 어떻게 노출시킬 수 있나요?
   변수 앞에 NEXT_PUBLIC_을 접두사로 붙이다. 이렇게 하면 클라이언트 측 코드에서 사용할 수 있다.
3. 모든 환경변수를 브라우저에 노출시키는 것이 안전한가요?
   아니요, 보안 위험을 방지하기 위해 민감한 정보의 노출을 피하십시오.
4. 다른 .env 파일 간에 중복 키를 어떻게 관리하나요?
   Next.js는 변수 값을 결정하기 위해 파일의 우선 순위를 사용한다. 이 순서에 주의하십시오.
5. 특정 환경에서 환경변수를 재정의할 수 있나요?
   예, 특정 .env 파일을 사용하십시오. 예를 들어, .env.development 또는 .env.production 등이 있다. .env.local은 로컬에서 변수를 재정의할 수 있으며 테스트에서는 제외된다.