율곡선생 75기 19강 Next js 환경변수를 위한 .env파일

🌐 넥스트.js의 환경변수 이해하기

넥스트.js는 환경변수를 세 가지 주요 방식으로 관리합니다: 개발(development), 프로덕션(production), 테스트(test) 환경입니다. 각 환경에 따라 다른 설정을 적용할 수 있으며, 이는 프로세스.env.NODE_ENV 변수를 통해 제어됩니다. 넥스트 프레임워크는 이 변수를 자동으로 생성하여 실행 환경에 맞는 값을 할당합니다. 개발자는 이러한 환경변수를 사용하여 코드를 더 유연하게 관리할 수 있습니다. 이 글에서는 넥스트.js의 환경변수 설정 방법과 활용 사례를 자세히 살펴보겠습니다.

🔧 프로세스.env 설정 및 사용법

환경변수 설정의 핵심은 바로 프로세스.env 파일입니다. 이 파일은 프로젝트 루트에 위치하며, 환경변수들을 키-값 쌍으로 정의합니다. 넥스트.js는 이 파일에서 설정된 변수를 자동으로 읽어들이며, 필요에 따라 개발(dev), 프로덕션(prod), 테스트(test) 모드로 설정할 수 있습니다. 예를 들어, "NODE_ENV=development"로 설정하면 개발 모드로 실행되며, 이때의 환경변수가 적용됩니다. 이러한 설정은 코드의 유연성을 높이고, 각 환경에 맞는 최적의 조건을 갖출 수 있도록 돕습니다.

📦 넥스트 프레임워크에서의 빌드 옵션

넥스트.js에서는 빌드 옵션을 통해 다양한 환경에서의 실행을 제어할 수 있습니다. 각 환경에 맞는 설정을 package.json 파일의 scripts 섹션에 정의할 수 있습니다. 예를 들어, "build:dev": "NODE_ENV=development next build"와 같은 스크립트를 사용하여 개발 환경에서 빌드를 진행할 수 있습니다. 이러한 방식으로 환경별로 다른 빌드 옵션을 적용할 수 있으며, 이는 프로젝트의 유연성과 유지보수성을 크게 향상시킵니다.

🔍 공통 환경변수와 전역 설정

공통 환경변수는 모든 환경에서 공통적으로 적용되는 기본 값을 정의합니다. 이는 프로젝트의 루트 디렉토리에 위치한 .env 파일에서 설정할 수 있으며, 우선순위가 가장 낮습니다. 특정 환경에서 이 값을 덮어쓰려면 해당 환경에 맞는 .env.development 또는 .env.production 파일을 생성하여 별도로 설정할 수 있습니다. 이렇게 하면 개발, 테스트, 배포 등 각 단계에 맞는 최적의 설정을 유지할 수 있습니다.

🖥️ 퍼블릭 환경변수 적용 사례

퍼블릭 환경변수는 클라이언트와 서버 모두에서 사용할 수 있는 변수입니다. 이 변수를 사용하려면 변수명 앞에 NEXT_PUBLIC_을 붙여야 하며, 이는 보안과 관련된 민감한 데이터를 포함하지 않아야 합니다. 퍼블릭 환경변수는 클라이언트 측에서도 접근 가능하기 때문에, API 엔드포인트나 기본 설정 값을 전달하는 데 유용합니다. 이를 통해 클라이언트와 서버 간에 일관된 데이터를 공유할 수 있습니다.

🌐 공식사이트

넥스트.js 공식 사이트