教程 > Next.js 中文教程 > Next.js 扩展知识 阅读：558

Next.js 环境变量

Next.js 支持在 node 中的发布环境变量，我们可以当在连接到服务器，数据库等时候来使用，我们需要在根目录中创建 .env.local 文件。 我们还可以创建 .env.production。

创建 .env.local

在root目录中创建 .env.local ，具有以下内容。

DB_HOST=localhost
DB_USER=jiyik
DB_PASS=nextjs

创建 env.js

在 pages/posts 目录中创建一个名为 env.js 的页面，其中我们将使用 process.env 来使用环境变量。

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() {
   // 使用DB属性连接到数据库
   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 /workspace/node/nextjs
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /workspace/node/nextjs/.env.local
event - compiled client and server successfully in 405 ms (124 modules)

在浏览器中打开 localhost:3000/posts/env ，我们将看到以下输出。

Next.js 环境变量

查看笔记

扫码一下
查看教程更方便