Next.js 13 - 17. 환경변수 & 졸업

환경변수 & 졸업

현재 강의에서는 주소가 localhost로 하드코딩되어 있다. 그런데 개발할 때 사용하는 api와 실서버 api의 주소가 다를 수 있다. 이런 정보를 애플리케이션의 소스코드에서 떨어트려 별도로 관리해야할 일이 생길 수 있다.

 

아래 환경변수 관련 문서를 보면 .env.local 파일을 홈디렉토리에 만들고 아래와 같이 애플리케이션이 사용하는 정보를 넣어주면 된다.

 

https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables

Configuring: Environment Variables | Next.js

.env.local

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

환경변수를 사용할 때는 process.env.${변수_이름}으로 사용하면 된다. GET을 할 때는 잘 데이터를 가져오지만 POST를 할 때는 작동하지 않는 걸 볼 수 있다.

기본적으로 환경변수에는 password 같이 기밀이 중요한 데이터가 있을 수 있다. 그런데 이런 비밀정보까지 클라이언트 컴포넌트에 의해 노출이 된다면 그 정보가 브라우저로 전송이 될 것이고 이 얘기는 유출이 됐다는 것이다.

 

이런 문제를 막기 위해서 기본적으로 환경변수는 layout.tsx와 같은 서버 컴포넌트에서만 접속이 가능하다. 그런데 이러면 좀 불편함이 존재할 수 있다. 이를 위해서 공식 문서에서 제공하는 웹 브라우저를 위한 환경변수를 사용하는 방법은 NEXT_PUBLIC_를 접두사로 붙이면 된다. 이제 다시 테스트해보면 잘 생성되는 것을 볼 수 있다.

 

잘 생성되는 이유는 NEXT_PUBLIC_ 접두사 덕분에 API_URL이라는 환경변수가 웹 브라우저로 전송될 수 있었기 때문이다. 이렇게 하는 이유는 보안 때문이다!

 

그리고 버전 관리할 때는 알아서 올라가지 않도록 .gitignore에 .env*.local이 들어있음을 알 수 있다. next.js에서 이미 처리를 해뒀기 때문에 따로 처리해주지 않아도 된다.

 

 그런데 개발을 하다보면 .env.local의 형식을 알아야 그걸 보고 .env.local을 만들 것인데 이걸 위해서 .env 파일의 내용을 공유할 필요가 있다. 이럴 때는 .env 파일을 복사해 .env.local.example이라는 이름으로 만들어 주고 샘플 정보만 담아두면 된다. 그럼 공유된 사람은 .env.local.example 파일을 보고 .env 파일로 복사하고 맞는 값을 넣어줘서 개발을 진행하면 된다.

 

지금까지 다룬 내용은 Next.js의 최소일 뿐이다. 앞으로 개발을 하면서 공식문서를 참고하면서 더 확장해 나가야겠다!

 

---

참고자료

생활코딩 - Next.js 13

https://opentutorials.org/course/5098

Next.js 13 - 생활코딩

https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables

Configuring: Environment Variables | Next.js