时间戳

首页 > 解决方案 > 在 nextjs 的页面目录之外设置环境变量？

javascript - 在 nextjs 的页面目录之外设置环境变量？

问题描述

有没有办法在 NextJS 的 pages 目录之外设置环境变量？我有一个在一个地方提供基本 API 路由的 util 函数。但是，由于这是一个 util 函数，它没有在页面上定义。如果可能的话，我想避免getStaticProps在每个页面上创建一个来获取我的私有环境变量。

有什么想法吗？

utils/index.ts（不在 nextJS 页面上）

export const apiAddress =
  process.env.NEXT_PUBLIC_CURRENT_ENV === 'PRODUCTION'
    ? process.env.PROD_API
    : process.env.DEV_API;

...

标签： javascriptreactjsnext.js

解决方案

我有一个类似的问题，我无法在 nextjs 应用程序中访问我的环境变量。

解决方案是在next.config.js 中读取它们并隐式传递它们。

我的示例从中加载环境，/environments/env.development但您可以使用任何您想要的位置。

所以我的下一个next.config.js看起来像这样：

const path = require('path')
const { parsed: localEnv } = require('dotenv-safe').config({
   allowEmptyValues: false,
   path: path.resolve(__dirname, `environments/.env.development`),
})

const nextConfig = {
   env: localEnv,
}

module.exports = nextConfig

您应该能够像往常一样访问 .env 文件中的 ENV 变量：

process.env.YOUR_VARIABLE

此外

根据环境，您也可以使用 package.json 中预定义的 ENV var，它可以让您为您的环境加载正确的文件。

在你的package.json定义中。就像在scripts部分：

"dev:development": "ENV=development node server.js",
"dev:staging": "ENV=staging node server.js"
...

然后，您可以访问 ENV var，并可以在next.config.js.

基于上面的例子：

path: path.resolve(__dirname, `environments/.env.${process.env.ENV}`),

推荐阅读