Next.js와 환경변수

환경변수

실제 OPEN API를 사용한 프로젝트에서는 API 주소 같은 것들을 환경변수로 따로 저장할 필요가 있다.

Next.js 프로젝트는 .env.local 이라는 이름으로 파일을 만든다. 환경변수 지정하고 불러오는 방법은 React와 같다. (이름 대문자로 지정하고, process.env로 불러온다)

루트 레이아웃은 fetch URL에 환경변수를 불러와서 넣어도 정상 작동하지만, create/page.js에서 fetch()의 주소를 환경변수로 바꾸면 작동하지 않는다. 이는 주소가 undefined가 뜨기 때문이다.

환경변수에는 기밀이 중요한 정보가 포함될 가능성이 높다. 그런데 기밀 정보까지 클라이언트 컴포넌트에 노출이 되면, 정보가 브라우저에 전송되고 유출된다는 의미이다. 이런 문제를 방지하기 위해서 환경변수는 서버 컴포넌트에서만 접근이 가능하다. '브라우저를 위한 환경변수'를 사용하려면 NEXT_PUBLIC_ 이라는 키워드를 앞에 붙인다.(보안이 되는 환경변수)

환경변수 관리방법

.env 파일은 기본적으로 .gitignore에 들어있기 때문에 버전관리가 불가능하다.

삭제 후 재설치하거나 그런 경우에는 .env 파일이 없어서 프로젝트가 정상적으로 작동되지 않을 수 있으므로, env 파일과 비슷한 이름의 사본을 만들고 샘플 정보를 담아서 관리하면 된다.