NextJS + Heroku：未加载环境变量

问题描述

我正在使用 NextJS 和 Heroku。

在索引处 - 第一次加载返回我在 getInitialProps 中获取的数据，但在常规函数中我收到一条错误消息，因为缺少环境变量。

当我转到不同的页面时，我遇到了同样的错误，但是当我刷新时，我可以看到在 getInitialProps 中获取的数据。 但同样，在常规函数中，我因缺少 env 变量而收到错误消息。

在本地它有效。 我试过 dotenv-webpack 但它没有帮助。 我在 Heroku 中添加了配置变量。

有任何想法吗？

这是我的 next.config.js 文件：

const { parsed: localEnv } = require('dotenv').config()
const webpack = require('webpack')
const Dotenv = require('dotenv-webpack')
const path = require('path')

module.exports = {
    //target: 'serverless',
    webpack(config) {
        config.plugins.push(new webpack.EnvironmentPlugin(localEnv))
        config.node = {fs: "empty"};
        config.plugins = config.plugins || []

        config.plugins = [
            ...config.plugins,

            // Read the .env file
            new Dotenv({
                path: path.join(__dirname, '.env'),
                systemvars: true
            })
        ]

        return config
    },
    publicRuntimeConfig: {
        ADDRESS: process.env.ADDRESS,
        API_TOKEN: process.env.API_TOKEN,
        INFURA_API_KEY: process.env.INFURA_API_KEY
    }
}

这是对我有用的（在 next.config.js 中）：

if (process.env.NODE_ENV === 'development') {
  require('dotenv').config()
}

module.exports = {
  env: {
    API_URL: process.env.API_URL,
  }
}

这使得 API_URL 在客户端和服务器、开发和生产环境中都可用。