원인: Next.js Node환경 환경변수
발단
firebase를 이용해서 로그인 기능을 구현중 계속
`{code: "auth/invalid-api-key", message: "Your API key is invalid, please check you have copied it correctly."}`
에러메세지가 호출되었다.
.env.local 파일에 정독하듯 환경변수 값들이 다르게 복사되었는지 계속 확인을 해봐도 틀리게 들어가지 않았는데
왜 호출이 안될까 1시간을 에러메세지랑 싸웠다.
해결
Configuring: Environment Variables | Next.js
Next.js comes with built-in support for environment variables, which allows you to do the following: Next.js has built-in support for loading environment variables from .env.local into process.env. This loads process.env.DB_HOST, process.env.DB_USER, and p
nextjs.org
SSR이 아닌 CSR에서 사용되는 환경변수는 `NEXT_PUBLIC_` 을 앞에 무조건 붙혀야 접근이 가능하다고 한다.
이게 무슨말이지 했는데 firebase의 로그인 기능은 CSR에서 호출되어 동작하기 때문에 `NEXT_PUBLIC_`이 필요한거 같다.
후에 SSR과 CSR에 대해서 자세히 다루면서 명확하게 사정을 알 수 있을거 같다
결론
해결되어서 행복하다
추가
실행 환경에 따른 환경변수 설정!! 방법
Configuring: Environment Variables | Next.js
Next.js comes with built-in support for environment variables, which allows you to do the following: Next.js has built-in support for loading environment variables from .env.local into process.env. This loads process.env.DB_HOST, process.env.DB_USER, and p
nextjs.org
Next.js에서는 .env(모든 환경), .env.development(개발 환경) 및 .env.production(프로덕션 환경)에 기본값을 설정할 수 있다고 한다.
이렇게 되면 개발과 배포후에 환경을 다르게 할 수 있어서 좋은거 같다.
