(Next.js) 환경변수 설정

1. 서버사이드

Next.js는 서버사이드와 클라이언트 사이드가 공존하기 때문에, env파일을 사용할 때에 서로 다른 형태를 취한다

우선 서버사이드 렌더링에서 env파일을 사용하려면, node.js에서 하던것처럼 process.env로 접근하면 된다

단, 서버사이드 랜더링과 관련된 곳에서만 가능하다. (getStaticProps, getServersideProps와 같은)

getStaticProps

서버사이드에서 미리 페이지를 렌더링을 할 때, 외부 데이터를 받아와야 할 필요성이 있을 경우, 해당 데이터를 그대로 받아서 pre-rendering 시킨다. 빌드 이후에는 해당 값으로 계속 고정되어버리기 때문에 변경되지 않는다. (revalidate 옵션을 설정하면 특정 주기별로 업데이트를 체킹하도록 만들 수 있다)

getServerSideProps

서버사이드에서 미리 데이터를 패칭받아 pre-rendering을 할 때, 매 요청 때마다 새롭게 데이터를 받아서 페이지를 랜더링을 한 후에 유저한테 전달한다.

NOTE. 즉, 이 함수들은 유저가 와 같은 형태로 페이지를 이동하거나 새로고침을 하는 등을 통해 서버에게 페이지를 새로 요청할 경우에만 의미가 있는 함수들이다. 일단 유저가 next.js를 통해 페이지를 받아왔을 경우, 그 이후로 Link나 useRouter의 push, replace 등으로 이동했다면 CSR을 실행하기 때문에 해당 함수들을 진행하지 않는다.
즉, 위 함수들은 유저가 홈페이지를 껐다가 다시 들어왔을 때, next.js 서버 입장에서 페이지를 새롭게 내려받아서 패칭할건지, 아니면 그냥 계속 박아놓고 고정된 빌드페이지를 전달할건지에 대해 정할 함수들이다.

환경변수 추가내용

서버사이드에서 환경변수를 사용할 경우, process.env는 특수한 형태의 자료구조이고 객체가 아니기 때문에, destructuring을 하는 행위를 피해야 한다.

추가적으로, 환경변수 영역 내에서 환경 변수 참조가 가능하다. 이때 참조를 하기 위해서는 "$" 표시를 앞에 붙이면 된다.
(다시말하면, 만약 변수에 $ 가 들어가야 할 상황이 있다면 이것이 $ 변수참조가 아니라는 의미로 "$" 형태로 쓰여져야 한다.)

2. 클라이언트 사이드

클라이언트 사이드에서 환경변수를 노출시켜야 하는 경우, next.js에서 요구하는 특수한 prefix를 붙여서 설정해야 한다.