Nextjs 기본 개발 팁 - dotenv lib

 

요즘은 다양한 플랫폼의 정보를 사용하게 되면서

인허가 받은 정보로

데이터를 가져오거나 Oauth 연동을 하는 경우가 많습니다.

 

이때, 이런 인가 코드를 코드 내에 하드 코딩하게 된다면 악의적인 용도로 사용되거나

예기치 못한 보안의 위협이 될 수 있습니다.

 

아래처럼 쉽게 endpoint 정보가 노출될 수 있습니다.

 

 

이런 보안 취약점을 보완하기 위해서

민감한 정보는 루트 경로에 .env 파일을 생성하여 작성하셔야 합니다.

 

 

1) 먼저, 프로젝트 내에 라이브러리 설치 합니다.

sudo npm install dotenv

 

 

2) 프로젝트 설치 후 루트 경로에 .env 파일을 생성합니다.

 

Next.js에서는 자동으로 개발과 운영 환경설정 파일을 구분하는데 구분하여 사용하고 싶으면

.env.development 파일과 .env.production 파일을 생성하여 각각 작성해주면 됩니다.

 

3) 해당 파일 내에 보안이 필요한 설정 정보를 입력하는데

server단에 사용되는 변수는 마음대로 지어도 상관없지만

client 단에서 사용할 때는 반드시 NEXT_PUBLIC_ 접두사를 입력해야 접근이 가능합니다.

(React는 반드시 접두사 REACT_APP_)

 

규칙을 따르지 않으면 undefined, 꼭 접두사를 넣어주세요.

 

4) 그러면 코드 내에서 process.env.변수명으로 접근 가능하게 됩니다.

export const BASE_URL = process.env.NEXT_PUBLIC_ENDPOINT