[Next.js] 클라이언트에서 process.env가 undefined를 반환할 때
클라이언트에서 process.env가 undefined를 반환하는 이유?
Next.js는 환경 변수를 Node.js 환경에서만 읽을 수 있게 제한하고 있습니다. 브라우저에서는 접근할 수 없기 때문에 undefined가 뜨는 것.
.env
1
TEST_URL="https://test.com"
index.js
1
2
3
export default function Index() {
console.log("process.env.TEST_URL" + process.env.TEST_URL);
}
console
클라이언트에서 필요한 경우가 있을까?
거의 없긴 하지만 100%라고 확신할 수는 없습니다. 예를 들어 카톡으로 웹페이지 공유 기능을 구현할 때 카카오 개발자 페이지에서 자바스크립트 key를 발급받고 발급받은 키를 프론트에서 함수를 실행할 때 넣어줘야 됩니다. 이런 식으로 라이브러리를 사용할 때 가끔 클라이언트에서 환경 변수를 처리해야 되는 경우가 있습니다.
해결 방법 1. getServerSideProps() 안에 넣고 파라미터로 전달
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const Index = ({params}) => {
console.log("process.env.TEST_URL : " + params.url);
}
export async function getServerSideProps(ctx) {
return {
props: {
params: {
url: process.env.TEST_URL
}
}
}
}
export default Index;
console
해결 방법 2. 환경 변수 앞에 NEXT_PUBLIC_ 넣기
Next.js 9.4 버전 이후부터는 환경 변수 앞에 NEXT_PUBLIC_을 붙히면 클라이언트에서도 읽을 수 있게 업데이트 됐다고 합니다.
.env
1
NEXT_PUBLIC_TEST_URL="https://test.com"
index.js
1
2
3
export default function Index() {
console.log("test url : " + process.env.NEXT_PUBLIC_TEST_URL);
}
console
9.4 이전 버전이거나 위에 방법이 안된다면?
위에 방법이 안되면 next.config.js 안에 환경 변수를 선언하는 것도 시도해 볼 수 있습니다. Next.js에서 더 이상 권장하지 않는 방식이라고 하지만.. 안되면 뭐라도 해야지..
next.config.js
1
2
3
4
5
module.exports = {
env: {
TEST_URL: process.env.TEST_URL,
}
}
참고
This post is licensed under CC BY 4.0 by the author.