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

📅  最后修改于: 2023-12-03 15:17:51.895000             🧑  作者: Mango

Next.js-环境变量

简介

Next.js 是一个 React 框架，它提供了一个开箱即用的配置来构建网站和应用程序。由于依托于 Node.js，Next.js 具有强大的服务器渲染功能，并且能够将页面的渲染工作委托给客户端。

Next.js 的环境变量能够使开发者在运行程序时，设置特定的配置项，来灵活调整程序的行为。在 Next.js 中，在使用环境变量的同时，你也能够指定运行环境。

安装
# 使用npm
$ npm i next

# 使用yarn
$ yarn add next
在 Next.js 中使用环境变量

若想要在 Next.js 中使用环境变量，需要新建一个 .env 文件，用作配置环境变量。然后将你的变量添加到 .env 文件中，这些变量以 key=value 这样的形式存放。NEXT_PUBLIC 表示将变量暴露给客户端，直接使用 process.env.KEY 即可在应用程序中使用。

例如：

# .env
API_ENDPOINT=http://localhost:3000/api
NEXT_PUBLIC_API_KEY=abcdefghijklmn

在程序中使用：

// ... imports 

export default function Home() {
  return (
    <div>
      <p>{process.env.API_ENDPOINT}</p>
      <p>{process.env.NEXT_PUBLIC_API_KEY}</p>
    </div>
  )
}
环境配置

环境变量的配置，依赖于执行命令时的环境。通过不同的 NODE_ENV 值，你可以为 dev、test、prod 等不同环境配置不同的环境变量。

例如，执行下面的命令，你的应用程序就会在 production 环境下运行：

NODE_ENV=production yarn start

在你的应用程序中，你可以通过process.env.NODE_ENV 来判断当前应用程序运行的环境，然后做出相应处理。

在服务器端使用环境变量

在编写 Next.js 服务器端代码时，你可以使用 process.env.VARIABLE_NAME 来访问你在环境变量文件中设置的变量。

例如：

// server.js

const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

const apiKey = process.env.NEXT_PUBLIC_API_KEY
const apiEndpoint = process.env.API_ENDPOINT

app.prepare().then(() => {
  const server = express()

  server.get('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(3000, (err) => {
    if (err) throw err

    console.log(`ready on port 3000 with api key ${apiKey} and api endpoint ${apiEndpoint}`)
  })
})
总结

在 Next.js 中使用环境变量非常方便，只需在 .env 文件中设置变量即可。同时，Next.js 的环境配置也能让你为不同的执行环境设置不同的变量，提升了程序的灵活性。在服务器端，开发者也能够通过 process.env.VARIABLE_NAME 访问并使用这些变量。

参考文献