코드에 포함시킬 수 없는 정보는 환경변수의 형태로 관리하는 것이 좋습니다.
예를들어 서버의 주소가 코드 안에 포함되어 있습니다.
const resp = await fetch(`http://localhost:9999/topics/${id}`);
실서버와 개발서버의 주소가 다르면 문제가 생깁니다.
소스코드
https://github.com/egoing/nextapp/commit/873e7c2195c91636ad06e04c094f75704b7b0105
절차
1. .env.local 파일 생성
NEXT_PUBLIC_API_URL=http://localhost:9999/
환경변수는 process.env.변수명을 이용해서 가져올 수 있습니다. 예를들면 아래와 같습니다.
const resp = await fetch(`${process.env.NEXT_PUBLIC_API_URL}topics/${id}`, {
NEXT_PUBLIC_ 접두사가 없으면 server component에서만 사용할 수 있고, client component에서는 사용할 수 없습니다. 이는 DB_PASSWORD와 같은 비밀정보를 보호하기 위한 안전장치입니다.
2. 코드 내의 주소를 변경합니다.
https://github.com/egoing/nextapp/commit/873e7c2195c91636ad06e04c094f75704b7b0105
