Environment Variables(환경변수)

[공지사항] 푸샤 깃허브 블로그 업데이트 사항

Next.js에는 환경 변수에 대한 지원이 내장되어 있어 다음을 수행할 수 있습니다.

• .env.local 환경 변수를 로드하는 데 사용
• NEXT_PUBLIC_ 접두사를 사용하여 브라우저에 환경 변수를 노출합니다.

환경 변수 로드

Next.js에는 .env.local에서 process.env로 환경 변수를 로드하는 기능이 내장되어 있습니다.

예 .env.local:

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

이렇게 하면 process.env.DB_HOST, process.env.DB_USER 및 process.env.DB_PASS가 Node.js 환경에 자동으로 로드되어 Next.js 데이터 가져오기 메서드 및 API 경로에서 사용할 수 있습니다.

예를 들어, getStaticProps 사용한다면:

// pages/index.js
export async function getStaticProps() {
  const db = await myDB.connect({
    host: process.env.DB_HOST,
    username: process.env.DB_USER,
    password: process.env.DB_PASS,
  });
  // ...
}

요약

• 1.
• 2.
• 3.

참고 영상

• Github 블로그

참조 문서 및 사이트

• Data fetching (서버사이드와 클라이언트 사이드 조합)

상단으로 푸샤 깃허브 이동