서버 컴포넌트에서 evn 설정
Next.js는 환경 변수를 에서 로드하는 기능을 기본적으로 지원함.
.evn.local
DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword
Bash
복사
이렇게 하면 process.env.DB_HOST, process.env.DB_USER및 process.env.DB_PASS 가 Node.js 환경에 자동으로 로드되어 서버 컴포넌트 에서 사용할 수 있다.
// app/api/route.js
export async function GET() {
const db = await myDB.connect({
host: process.env.DB_HOST,
username: process.env.DB_USER,
password: process.env.DB_PASS,
})
// ...
}
JavaScript
복사
Next.js는 $를 사용하여 다른 변수를 참조하는 변수를 자동으로 확장함.
(예: .env* 파일 내부의 $VARIABLE).
이를 통해 다른 시크릿을 참조할 수 있음.
TWITTER_USER=nextjs
TWITTER_URL=https://twitter.com/$TWITTER_USER
JavaScript
복사
process.env.TWITTER_URL = https://twitter.com/nextjs
클라이언트 컴포넌트에서 evn 설정
ClientComponent 에서 사용할거면 .env 에서 NEXT_PUBLIC_를 앞에 붙여줄 것
NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
JavaScript
복사
import setupAnalyticsService from '../lib/my-analytics-service'
// 빌드 시점에 `setupAnalyticsService('abcdefghijk')`로 변환됨.
setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID)
function HomePage() {
return <h1>Hello World</h1>
}
export default HomePage
JavaScript
복사
참고
// 변수를 사용하기 때문에 인라인 지원이 안됨.
const varName = 'NEXT_PUBLIC_ANALYTICS_ID'
setupAnalyticsService(process.env[varName])
// 변수를 사용하기 때문에 인라인 지원이 안됨.
const env = process.env
setupAnalyticsService(env.NEXT_PUBLIC_ANALYTICS_ID)
JavaScript
복사
기본 환경 변수
일반적으로 .env.local 파일은 하나만 필요함. 그러나 개발(다음 개발) 또는 프로덕션(다음 시작) 환경에 대한 기본값을 추가하고 싶을 때가 있음.
Next.js를 사용하면 .env(모든 환경), .env.development(개발 환경) 및 .env.production(프로덕션 환경)에 기본값을 설정 가능.
.env.local은 항상 설정된 기본값을 재정의.
알아두면 좋은 사항: .env, .env.development 및 .env.production 파일은 기본값을 정의하므로 리포지토리에 포함되어야 함.
.env*.local 파일은 무시하도록 되어 있으므로 .gitignore에 추가해야 함. .env.local은 시크릿을 저장할 수 있는 위치임.