NextJS + Heroku: env variables not loading

Got an answer in next.js github page: https://github.com/zeit/next.js/issues/6533

I tried a few different ways to solve it that collided.

Setting the environment vars with dotenv-webpack didn't work for me. What did work was setting env in next.config.js like this:

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',    }}

Here's what worked for me (in next.config.js):

if (process.env.NODE_ENV === 'development') {  require('dotenv').config()}module.exports = {  env: {    API_URL: process.env.API_URL,  }}

This makes API_URL available on both the client and the server, on development and production environments.