For zeit.co we're using a really neat babel plugin called transform-define

It's basically the same that webpack does, but thanks to doing it in babel, it has advantages for next:

• it's universal (client and server)
• it's easier to config! (just add it to plugins inside .babelrc or package.json)

package.json:

{
  "dependencies": {
    "next": "beta",
    "babel-plugin-transform-define": "1.2.0"
  },
  "babel": {
    "presets": [
      "next/babel"
    ],
    "plugins": [
      [
        "transform-define",
        "./env-config.js"
      ]
    ]
  }
}

env-config.js:

const prod = 'production' === process.env.NODE_ENV

module.exports = {
  'MY_ENV_VARIABLE': prod
    ? 'production'
    : 'development'
}

pages/index.js

export default () => (
  <div>Hello visitor from { MY_ENV_VARIABLE }</div>
)