Nextjs

환경변수 & 졸업

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

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

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

댓글

댓글 본문
  1. 첫 완강! 많이 배웠습니다. 더 많이 배우고 싶어졌습니다. 좋은 강의 감사합니다!!