📌  相关文章
📜  Next.js-环境变量

📅  最后修改于: 2020-10-22 06:48:48             🧑  作者: Mango

Next.js支持在节点中发布环境变量，我们可以将其用于连接服务器，数据库等。为此，我们需要在根目录中创建.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 (
      <>
         
            
               Environment Variables
            
            
Database Credentials

               
Host: {props.host}

               
Username: {props.username}

               
Password: {props.password}

         
      >      
   )
}

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 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，您将看到以下输出。

环境变量