[Next.js ]Next.js에서 환경변수 prefix 사용하기

NextJS에서 환경변수(env)는 서버에서만 참조할 수 있다.

서버와 브라우저에서 모두 환경변수를 사용하기 위해서는 prefix가 필요하다.

Prefix

prefix는 사용할 환경변수명 앞에 NEXT\_PUBLIC\_ 을 붙여준다.

NEXT_PUBLIC_ 이란?

Next.js 에는 두 가지가 있다.

1. React 컴포넌트를 사용해 빌드된 후 클라이언트에게 보이는 UI 부분과

2. Next.js 애플리케이션으로 서버에서 실행되는 부분이다.

후자의 경우,

• /pages/api : 라우팅
• getServerSideProps(): 서버사이드 props 가져올 때
• getStaticProps(): 빌드시 한 번만 props 가져올 때

3가지의 케이스가 있다.

클라이언트에 직접 전송되지 않기에 결제 정보와 같은 민감한 값을 사용해도 안전한 것이다.

하지만 클라이언트에 전송되는 데이터는 쉽게 노출될 수 있어서 민감한 정보는 조심해야 한다.

따라서 NextJS는 NEXT\_PUBLIC\_ 이라는 prefix를 사용하지 않으면 클라이언트단에서 환경변수로 접근할 수 없도록 하는 것이다.

브라우저의 참조를 위한 Prefix 사용법

- 환경변수 생성

# 1
TEST_VALUE = test_value

# 2
NEXT_PUBLIC_TEST_VALUE = test_value

1번의 경우, 서버에서만 사용 가능하고

2번처럼 작성해야 서버와 브라우저에서 모두 사용 가능하다.

- 환경변수 참조

참조할 때도 마찬가지로 prefix를 붙여줘야 한다.

console.log(process.env.NEXT_PUBLIC_TEST_VALUE); // test_value

---

https://nextjs.org/docs/basic-features/environment-variables

[Basic Features: Environment Variables | Next.js

Learn to add and access environment variables in your Next.js application.

nextjs.org](https://nextjs.org/docs/basic-features/environment-variables)

https://cpro95.tistory.com/464

[NextJS에서 환경변수 .env 사용하는 방법

NextJS는 기본적으로 환경 변수를 지원하고 있으며, 사용하기가 매우 쉽습니다. 환경 변수가 필요한 이유 환경 변수가 필요한 이유는 우리가 웹 애플리케이션을 만들 때 개발 모드(development mode)와

cpro95.tistory.com](https://cpro95.tistory.com/464)