환경변수 & 졸업

코드에 포함시킬 수 없는 정보는 환경변수의 형태로 관리하는 것이 좋습니다.

예를들어 서버의 주소가 코드 안에 포함되어 있습니다.

const resp = await fetch(`http://localhost:9999/topics/${id}`);

실서버와 개발서버의 주소가 다르면 문제가 생깁니다.

소스코드

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. 코드 내의 주소를 변경합니다.