Next.js

Next.js에서 환경변수 .env를 클라이언트 사이드에서도 사용하려면..?

2023. 5. 5. 13:26
목차
  1. 🐕 환경변수를 사용해야하는 이유
  2. 👻환경 변수를 등록하는 방법
  3. 🥶 env 파일을 수정했을 때는
  4. 🐶레퍼런스

🐕 환경변수를 사용해야하는 이유

API key 노출되면 다른 사람에게 한무 즐기기를 당할 수도 있습니다.

굉장히 불쾌하고 API의 플랜에 따라서는 통장잔고가 남아나지 않을 수도 있겠죠..?

따라서 github에 API Key를 고대로 올려버리면 안됩니다. 잘 숨겨줘야 하는데 주로 환경변수를 많이 이용합니다.

 

물론 이러한 용도로만 사용되는 것은 아니고 개발, 테스트, 실제 서비스 등 여러 환경에서

애플리케이션을 배포하게 되기 때문에 각 환경에 따라서 다르게 설정해야하는 항목들을 환경변수로 관리합니다.


👻환경 변수를 등록하는 방법

root 디렉토리에 .env 혹은 .env.local 파일을 생성해줍니다.

이 안에는 키밸류 쌍의 형태로 값을 저장해줄 수 있습니다.

루트디렉토리에 생성한 .env.local 파일

NEXT_PUBLIC_IP_API_KEY = 대충 api 키
ID_API_KEY = 대충 api 키

여기서 ID_API_KEY는 다른 파일 내부에서

process.env.ID_API_KEY 의 형태로 접근할 수 있습니다.

NEXT_PUBLIC_IP_API_KEY역시도

process.env.NEXT_PUBLIC_IP_API_KEY로 접근할 수 있습니다.

 

그런데 문제는 NEXT는 서버컴포넌트와 클라이언트컴포넌트 두가지 종류의 컴포넌트가 있다는 것입니다.

따라서 그냥 설정해준 API_KEY의 경우에는 클라이언트사이드에서는 접근할 수 없습니다.

왜냐하면 우리가 등록해준 환경변수는 Node.js의 환경을 말하는 것이기 때문입니다.

 

따라서 클라이언트 컴포넌트(리액트 컴포넌트)에서 환경변수에 접근해야하는 경우

NEXT_PUBLIC이라는 접두사를 사용하는 것을 통해 클라이언트 컴포넌트에서 환경변수에

접근하는 것을 허용해주는 것입니다. 하나의 약속이라고 생각할 수 있겠네요!


🥶 env 파일을 수정했을 때는

개발서버를 다시 시작해주어야 환경변수가 적용된 환경으로 서버가 시작됩니다.

vercel, netlify 등에 배포하는 경우에는 앱 설정 대시보드에서 환경변수를 입력해줄 수 있습니다.

env 파일 작성했으니 되겠지하면 안됨니다... 당연함 env 파일을 깃허브에 안올림


🐶레퍼런스

https://cpro95.tistory.com/464


이해했다고 생각할 때가 가장 무서울 때다.

 

반응형
저작자표시 비영리 (새창열림)

'Next.js' 카테고리의 다른 글

next-auth를 이용해 Google 로그인 구현하기(기초)  (1) 2023.05.31
Next.js에서 에러를 핸들링 하는 방법  (0) 2023.05.27
Next.js quick start 환경 설정 및 간단한 사용법  (0) 2023.05.04
SSR, CSR, SSG, ISR 이해해보기..  (4) 2023.04.30
Link 컴포넌트는 어떻게 흰 화면을 보여주지 않을 수 있을까?  (0) 2023.04.28
  1. 🐕 환경변수를 사용해야하는 이유
  2. 👻환경 변수를 등록하는 방법
  3. 🥶 env 파일을 수정했을 때는
  4. 🐶레퍼런스
'Next.js' 카테고리의 다른 글
  • next-auth를 이용해 Google 로그인 구현하기(기초)
  • Next.js에서 에러를 핸들링 하는 방법
  • Next.js quick start 환경 설정 및 간단한 사용법
  • SSR, CSR, SSG, ISR 이해해보기..
냠냠맨
냠냠맨
프론트엔드 개발 전반을 다루는 기술 블로그입니다.
냠냠맨
React와 TypeScript를 좋아하는 개발자
냠냠맨
전체
오늘
어제
  • all category (434)
    • CMC (0)
    • best (11)
    • 년간회고 (1)
    • cheetsheet (15)
    • 프로젝트 회고 (3)
    • 서평 (3)
    • SEO Study (1)
    • 프로젝트 진행기 (10)
    • testcode (9)
    • yarnberry (7)
    • css (21)
    • typescript (15)
    • redux (7)
    • react (43)
    • Next.js (9)
    • Nestjs (3)
    • javascript (44)
    • programmers (67)
    • leetcode (41)
    • frontend (41)
    • backjoon (1)
    • Next.js Beta Docs 번역 (12)
    • TIL (15)
      • html (3)
    • Network (12)
      • 간단 정리 시리즈 (2)
      • 질답 준비 (0)
    • 자료구조와 알고리즘 (2)
    • CS (4)
      • OS (1)
    • 취업준비 (2)
    • zoom websocket (2)
    • talk (6)
    • 면접대비 (1)
    • 코드스테이츠 프론트 (5)
    • 간헐적 회고 (18)

블로그 메뉴

  • leetcode
  • programmers
  • javascript
  • html
  • css

공지사항

인기 글

태그

  • 말풍선
  • 개발자
  • JavaScript
  • 테오의스프린트17기
  • 테오의스프린트
  • border말풍선
  • 주니어개발자
  • LeetCode
  • frontend
  • 프론트엔드
  • teosprint
  • CSS
  • 개발
  • 코드스테이츠 #프론트엔드

최근 댓글

최근 글

hELLO · Designed By 정상우.
냠냠맨
Next.js에서 환경변수 .env를 클라이언트 사이드에서도 사용하려면..?
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.