✓ 환경 변수 ( Environment Variables )

환경 변수 구분이란 환경에 따라 변할 수 있는 값들을 분기 처리하는 작업을 말한다.

예를 들면,
• Development 환경에서는 A 리스트이지만, 실제 Production 환경에서는 B 리스트가 나와야 하는 경우
• 테스트 데이터와 실제 서비스 데이터가 구분되는 경우
등이 있다.

Next.js 는 별다른 작업 없이 환경변수를 사용할 수 있도록 제공한다.

---

📖 사용법

🔔 Notice
사용법은 Node.js 환경과 Browser 환경이 다르므로 주의한다!
• Node.js :  process.env.변수명
• Browser :  process.env.NEXT_PUBLIC_변수명

.env.development

📁 / .env.development

.env.production

📁 / .env.production

🔔 Notice
name 은 Node.js 환경에서 사용해보고,
앞에 NEXT_PUBLIC_ 이 붙은 변수는 Browser 환경에서 사용해보자.

index.js

📁 / pages / index.js

[id].js

📁 / pages / view / [id].js

---

✓ 결과 확인

Development Mode

npm run dev 로 개발 환경에서 결과를 확인해보자.

home 메뉴에서는 Maybelline 브랜드의 제품 리스트가 나타나고,
상세페이지에서는 "DEVELOPMENT 환경입니다." 라는 메시지가 나타난다.

Production Mode

npm run build & npm run start로 프로덕션 환경에서 결과를 확인해보자.

home 메뉴에서는 Dior 브랜드의 제품 리스트가 나타나고,
상세페이지에서는 "PRODUCTION 환경입니다." 라는 메시지가 나타난다.