next.js 环境变量——迹忆客-ag捕鱼王app官网

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 (
      <>
         
            
               
            
            
               
host: {props.host}
               
username: {props.username}
               
password: {props.password}
         
            
   )
}
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 ，我们将看到以下输出。