Next.js-환경 변수

Next.js는 서버, 데이터베이스 등에 연결할 때 사용할 수있는 노드에 환경 변수를 게시하는 기능을 지원합니다.이를 위해 루트 디렉토리에 .env.local 파일을 생성해야합니다. .env.production도 만들 수 있습니다.

.env.local 만들기

다음 내용으로 루트 디렉터리에 .env.local을 만듭니다.

DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjs

env.js 만들기

process.env를 사용하여 환경 변수를 사용할 pages / posts 디렉토리에 다음 내용으로 env.js라는 페이지를 만듭니다.

import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost(props) {
   return (
      <>
         <Container>
            <Head>
               <title>Environment Variables</title>
            </Head>
            <h1>Database Credentials</h1>
               <p>Host: {props.host}</p>
               <p>Username: {props.username}</p>
               <p>Password: {props.password}</p>
         </Container>
      </>	  
   )
}

export async function getStaticProps() {
   // Connect to Database using DB properties
   return {
      props: { 
         host: process.env.DB_HOST,
         username: process.env.DB_USER,
         password: process.env.DB_PASS
      }
   }
}

이제 서버를 시작하십시오.

Next.JS는 .env.local을 감지하고 콘솔에 다음 메시지를 표시합니다.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
wait  - compiling...
event - compiled successfully
event - build page: /posts/env
wait  - compiling...
event - compiled successfully

출력 확인

브라우저에서 localhost : 3000 / posts / env를 열면 다음 출력이 표시됩니다.