• Blog
  • Projects
  • Resume
profile_image

Next.js 환경변수, 그리고 Vercel

Next.jsVercel

2022.12.21

Next.js의 환경변수


서버 사이드에서 환경변수 접근

  • Next.js는 .env.local에서 process.env로 환경 변수를 불러오는 기능을 기본적으로 지원합니다.

    👇 예시

    DB_ID=hoyoung
DB_PWD=pwd1234
    • process.env.DB_ID, process.env.DB_PWD로 서버 환경(Node.js 환경)에 자동으로 불러옵니다.
    • 해당 값들은 Next.js의 Data fetching methods에서 사용하거나 API routes에서 사용할 수 있습니다.

클라이언트 사이드에서 환경변수 접근

  • Next.js에서 환경변수는 기본적으로 서버 사이드에서만 사용할 수 있습니다.
    환경변수를 클라이언트 환경에서 불러오려면, 변수명 앞에 NEXT_PUBLIC_를 붙여야합니다.

    👇 예시

    NEXT_PUBLIC_URL=https://hoyoung.dev

Vercel에서의 환경변수


Vercel로 앱을 배포할 때의 환경변수

  • Vercel에 아무런 설정을 하지 않을 경우, 배포 시 환경변수들이 동작하지 않습니다.
    또한, 원격저장소에 .env 파일이 있어도 동작하지 않습니다.
    (Vercel에서 원격저장소에 있는 .env에 접근하지 않기 때문..!)
    그렇기에 Vercel에서 배포할 앱의 Settings를 변경해야 합니다.

  • Vercel → 나의 Dashboard → [배포할 앱] → Settings 탭 → Environment Variables


    Vercel: Project Settings - Environment Variables

    • 환경변수 이름과 값을 입력 → 어떤 환경에서 사용할지 선택 → Save를 눌러 저장.

적용된 환경변수를 로컬저장소로 가져오려면?

  • 먼저 vercel-cli 설치 (설치가 되어있다면, SKIP) 
    $ npm i -g vercel
  • 로컬 저장소를 Vercel 프로젝트에 연결 
    $ vercel link
# ################# vercel-cli #################
> Log in to Vercel # Vercel에 로그인
> ? Set up “[로컬 저장소 위치]”? [Y/n] # y
> ? Which scope should contain your project? # 자신의 계정 선택
> ? Found project “[Vercel 계정명/Vercel 프로젝트명]”. Link to it? [Y/n] # y
✅  Linked to [Vercel 계정명/Vercel 프로젝트명] (created .vercel)
# ###############################################
  • Vercel의 환경변수 로컬저장소로 가져오기 
    $ vercel env pull .env.local

참고 자료

Next.js

Vercel

일반