Question

我正在使用NextJS和Heroku。

在索引处-首次加载返回了我在getInitialProps中获取的数据，但是在常规函数中，由于缺少env vars，因此我收到一条错误消息。

当我转到另一个页面时，会遇到相同的错误，但是当我刷新时，可以看到在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
    }
}

Answer 1

在next.js github页面中得到答案：https://github.com/zeit/next.js/issues/6533

我尝试了几种不同的方法来解决它的冲突。

用dotenv-webpack设置环境变量对我不起作用。所做的工作是像这样在env中设置next.config.js：

const { parsed: localEnv } = require('dotenv').config()
const webpack = require('webpack');

const path = require('path')

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

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

        return config
    },
    env: {
        ADDRESS: '0xd6F75293ec795',
        API_TOKEN: 'YUBKzlbA2eFmNbkzk',
        INFURA_API_KEY: '97eb10aac61799f9e865',
        MNEMONIC: 'my not so secret for testing password',
    }
}

Answer 2

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

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

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

这使得API_URL在客户端和服务器上以及开发和生产环境中均可用。

NextJS + Heroku：不加载环境变量

2 个答案: