.env.local

nextjs에서는 .env파일이 아닌 .env.local 파일을 생성하여 환경변수에 쉽게 접근할 수 있다. 또한 vercel에 배포할 경우 환경변수를 사용하기 위해서는 .env가 아닌 .env.local에 생성한 환경변수에 접근이 가능하다. 적용이 되지 않을 때 필히 서버를 재 시작해서 확인해야 한다.

중요한 점은 dotenv는 설치되어있으면 오류가 발생하므로 접근관련 lib을 아무것도 설치할 필요가 없다.

// .env.local

EXP="response"
NEXT_PUBLIC_EXP="response"

앞에 NEXT_PUBLIC을 붙이면 클라이언트에서 접근이 가능하다. 
ex) <h1>{process.env.NEXT_PUBLIC_EXP}</h1>

붙이지 않을 경우 서버 사이드에서만 접근이 가능하다.
{process.env.EXP}

꼭 앞에 NEXT_PUBLIC을 붙이지 않더라도 클라이언트에서 접근할 수 있는 간단한 방법이 있다. 우선 /root 경로에 next.config.js파일을 생성한다.

// next.config.js

module.exports = {
  env: {
    EXP: process.env.EXP,
    // 원하는 환경변수 여러개 추가 가능.
  },
};

매우 간단하다. 서버를 재시작하면 이제 client에서도 process.env.EXP로 접근이 가능하다.
하지만 vercel에 배포해보면 적용이 안되는 것을 알 수 있다.

vercel에 배포시 환경변수 적용방법

vercel에서 배포한 프로젝트의 settings를 클릭하면 Environment Variables메뉴가 있다.
원하는 환경변수를 설정해주고 재배포하면 적용이 되는것을 확인할 수 있다.