Next.js - 環境變數

Next.js 支援在 node 中釋出環境變數，我們可以在連線到伺服器、資料庫等時使用。為此，我們需要在根目錄中建立 .env.local 檔案。我們還可以建立 .env.production。

建立 .env.local

在根目錄中建立 .env.local，內容如下。

DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjs

建立 env.js

在 pages/posts 目錄中建立一個名為 env.js 的頁面，內容如下，我們將使用 process.env 在其中使用環境變數。

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

> nextjs@1.0.0 dev D:\Node\nextjs
> next

ready - started server on https://: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，你將看到以下輸出。

Print Page

上一個

下一個