주소를 보면 localhost로 하드코딩되어 있는 것을 볼 수 있습니다. 개발할 때 사용하는 API와 실서버에서 사용하는 API 주소가 다를 수 있습니다. 즉, 별도로 관리하는 필요성이 생길 수 있습니다. 그럴 땐 무엇을 봐야할까요?
바로 환경변수를 살펴보면 됩니다.
.env local 이라는 파일을 홈 디렉토리에 만들고 어플리케이션에 사용하는 정보를 작성하면 됩니다.
//.env.local
NEXT_PUBLIC_API_URL=http://localhost:9999/그 이후에 fetch 명령어를 통해 서버로부터 데이터를 가져오는 코드들을 밑의 코드처럼 다 변경하였습니다.
const resp = await fetch(`${process.env.NEXT_PUBLIC_API_URL}topics/`, {하지만 클라이언트 컴포넌트에서는 잘 작동하지 않는 것을 볼 수 있었습니다. 환경변수에는 패스워드와 같은 중요한 정보를 넣어두기 때문에 보안상의 문제가 발생할 수 있습니다.
클라이언트 컴포넌트에 노출되면 유출될 수 있으니 서버컴포넌트에서만 환경변수로 접속이 가능하다는 것을 알 수 있기 때문에 API_URL로만 설정하는 것이 아닌 NEXT_PUBLIC_을 접두사로 붙이며 웹브라우저를 위한 환경변수로 사용할 수 있도록 하였습니다.
