Post

[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

console 1

 

클라이언트에서 필요한 경우가 있을까?

거의 없긴 하지만 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

console 2

 

해결 방법 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

console 3

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.