Next.js에서 클라이언트 컴포넌트에서 환경변수 사용하기

1. 개요

 클라이언트 컴포넌트에서 .env에 정의해놓은 환경변수를 이용하기 위해 아래처럼 코드를 작성했다.

 

NEXT_PUBLIC_SUPABASE_PUBLIC_KEY="..."
NEXT_PUBLIC_SUPABASE_URL="https://..."

const client = createClient(
  process.env.SUPABASE_URL,
  process.env.SUPABASE_PUBLIC_KEY
);

 

그랬더니 이와 같은 에러가 발생했다. 혹시나 해서 process.env.SUPABASE_URL의 값을 console.log로 확인해보았더니 undefined였다. 하지만 서버 컴포넌트에서 확인해보았을 때는 제대로 된 값을 확인해볼 수 있었다.

 

2. 이유

 .env 파일에 분명히 SUPABASE_URL의 값을 정의해놓았지만 process.env.SUPABASE_URL의 값이 undefined인 이뉴는 보안적인 이유 때문이다. .env 파일의 값들은 서버에서만 사용하도록 설계되어있기 때문에 클라이언트에서 환경 변수에 접근할 수 있으면 보안상 좋지 않기 때문이다.

 

3. 해결 방법

3-1. NEXT_PUBLIC_ 접두사 사용

 

 .env 파일의 변수명 앞에 NEXT_PUBLIC_를 붙이는 것으로 해결할 수 있다. 

 

NEXT_PUBLIC_SUPABASE_PUBLIC_KEY="..."
NEXT_PUBLIC_SUPABASE_URL="https://..."

const client = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_PUBLIC_KEY!
);

 

위의 상황에서는 변수명을 이렇게 수정하는 것으로 해결할 수 있다. 하지만 민감한 정보에는 이런 방식을 적용하는 것을 지양해야 할 것이다.

 

3-2. 부모 컴포넌트에서 props로 전달

 부모 서버 컴포넌트에서 자식 클라이언트 컴포넌트로 환경변수 값을 props로 전달하여도 된다. 이는 위 방법보다 보안적으로 더 안전하며 민감한 정보 노출을 막을 수 있다.