[Next.js] 환경변수 사용법 (.env)

Next.js에서 환경 변수를 사용하는 방법은 다음과 같음

이 과정을 통해 환경변수를 프로젝트에 안전하게 통합할 수 있다.

 

1. 환경 변수 파일 생성

next.js는 .env.local / .env.development / .env.production 등 파일을 사용해 환경변수를 관리함.

- .env.local : 항상 로드되며, 다른 파일보다 우선됨. (이 파일은 Git에 포함시키지 않는것이 좋다고 함. 이유는 더 찾아볼 것)

- .env.development : next dev를 실행할 때 로드됨

- .env.production : next start를 실행할 때 로드됨

 

예를 들면 .env.local 파일을 생성하고 다음과 같은 내용을 추가할 수 있음

NEXT_PUBLIC_API_URL=https://api.example.com //클라이언트 사이드에서 접근 가능한 공개 API URL
SECRET_API_KEY=your-secret-key //서버 사이드에서만 접근 가능한 비밀 API 키

NEXT_PUBLIC_API_HOST=http://13.124.7.84:8080 //클라이언트 사이드에서 접근 가능한 공개 API 호스트
NEXT_PUBLIC_API_HOST_OLD=http://13.124.7.84:8080 //이전, 또는 대체 API 호스트

 

 

 

2. 환경 변수 사용하기

환경 변수 사용하려면 다음과 같이 접근

 

-클라이언트 사이드에서 접근: NEXT_PUBLIC_ 으로 시작하는 환경 변수만 클라이언트 사이드에서 접근할 수 있다.

// pages/index.js
export default function Home() {
  console.log(process.env.NEXT_PUBLIC_API_URL); // 'https://api.example.com'
  return <div>Home Page</div>;
}

 

- 서버 사이드에서 접근: 모든 환경변수가 서버 사이드에서 접근 가능

// next.config.js
module.exports = {
  serverRuntimeConfig: {
    // 서버 측에서만 사용 가능
    secretApiKey: process.env.SECRET_API_KEY,
  },
  publicRuntimeConfig: {
	// 서버와 클라이언트 모두에서 사용 가능
    apiUrl: process.env.NEXT_PUBLIC_API_URL,
  },
};

 

 

3. 환경 변수 사용시 주의사항

- 보안 고려: NEXT_PUBLIC_ 으로 시작하는 환경 변수는 클라이언트 사이드에서 접근 가능하므로, 민감한 정보를 포함하지 않는게 좋음

- 재시작 필요: .env 파일을 수정한 후에는 Next.js 서버를 재시작 해야 변경이 반영됨

- 타입스크립트 사용 시: ts를 사용하는 경우 ts가 환경 변수를 인식할 수 있도록 next-env.d.ts 파일에 환경변수를 선언해 주어야 함

// TS 사용 시 next-env.d.ts파일에 환경변수 선언 예시
namespace NodeJS {
  interface ProcessEnv {
    NEXT_PUBLIC_API_URL: string;
    SECRET_API_KEY: string;
  }
}

 

 

 

4. 커스텀 서버 환경 변수 설정

next.js를 커스텀 서버와 함께 사용한다면 next.config.js에서 환경 변수를 설정할 수 있음.

// next.config.js
module.exports = {
  env: {
    CUSTOM_ENV_VARIABLE: process.env.CUSTOM_ENV_VARIABLE,
  },
};

 

 

 

 

https://curryyou.tistory.com/503

[Next.js] 환경변수 사용 방법: .env파일 (development, production, local)

정리를 잘 해놓으신것 것 같다. 참고해서 개발 고고