Front-End/Next.js
Next.js | 기본기능 | 환경 변수
개발자티포
2021. 10. 13. 16:46
728x90
반응형
예시
https://github.com/vercel/next.js/tree/canary/examples/environment-variables
GitHub - vercel/next.js: The React Framework
The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.
github.com
우리는 기본적으로 .env.local 파일을 생성해서 환경 변수를 설정할 수 있다.
.env.local
DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword
선언한 환경 변수들을 서버사이드 측에서 다음과같이 쓸 수 있다.
// 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,
})
// ...
}
Next 브라우저에서의 환경 변수
Next 브라우저에서는 'NEXT_PUBLIC_' 접두사를 붙여야한다. 예를들어
.env.local
NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
이렇게 선언한 환경 변수를 브라우저에서 다음과 같이 쓸 수 있다.
// pages/index.js
import setupAnalyticsService from '../lib/my-analytics-service'
// NEXT_PUBLIC_ANALYTICS_ID can be used here as it's prefixed by NEXT_PUBLIC_
setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID)
function HomePage() {
return <h1>Hello World</h1>
}
export default HomePage
728x90
반응형