menu

Next.js

A place to chat about Next.js and answer questions. For all other ZEIT products, check this out.

Channels
Team

Runtime Configs with process.env

June 28, 2018 at 5:48am
The Next.js community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

Runtime Configs with process.env

June 28, 2018 at 5:48am
I've been following along with a bunch of the examples and whatnot, and finally came across this section:
It looks like I can set configs in next.config.js:
// next.config.js
module.exports = {
serverRuntimeConfig: { // Will only be available on the server side
mySecret: 'secret'
},
publicRuntimeConfig: { // Will be available on both server and client
staticFolder: '/static'
}
}
But is there a way to set those configs via process.env? I want to set my env variables through Heroku and not commit them into my repo

June 28, 2018 at 7:31am
// next.config.js
module.exports = {
serverRuntimeConfig: { // Will only be available on the server side
mySecret: 'secret'
},
publicRuntimeConfig: { // Will be available on both server and client
staticFolder: process.env.STATIC_FOLDER
}
}
  • reply
  • like
It's as simple as just using process.env.SOMETHING as value 👍
  • reply
  • like

June 30, 2018 at 12:00am
Ah! Ok, I feel a little silly for that thinking of that 😄
Is there a way to also read the `process.env` variables via dotenv? At the end of the day, I'm trying to avoid checking secrets into source control.
I'm also quite new to node.js development on the backend (traditionally have done Rails), so apologies for the newbie questions.
  • reply
  • like
Oh! I think I figured it out. Instead of using babel, I used this package:
  • reply
  • like

June 30, 2018 at 10:29am
Yeah just require('dotenv').config() in your next.config.js 👍
like-fill
1
  • reply
  • like

June 30, 2018 at 8:04pm
Thanks!
  • reply
  • like

January 24, 2019 at 3:27pm
A follow-up question on this - I'm using the following code in next.config.js file...
  • reply
  • like
const { parsed: localEnv } = require("dotenv").config();
const webpack = require("webpack");
const withLess = require("@zeit/next-less");
const withCSS = require("@zeit/next-css");
const withTypescript = require("@zeit/next-typescript");
const getRoutes = require("./routes");
// fix: prevents error when .less files are required by node
if (typeof require !== "undefined") {
require.extensions[(".less", ".css")] = file => {};
}
module.exports = withLess(
withCSS(
withTypescript({
webpack: function(config) {
config.plugins.push(new webpack.EnvironmentPlugin(localEnv));
return config;
},
lessLoaderOptions: {
javascriptEnabled: true
// modifyVars: themeVariables // make ANTD custom vars effective
}
// exportPathMap: getRoutes
})
)
);
Edited
  • reply
  • like
and when I'm debugging in the browser, the process.env keeps showing up EMPTY. Any suggestion as to why?
  • reply
  • like

February 21, 2019 at 10:07pm
I'm running into the same issue.
  • reply
  • like
process.env is a Node thing, so I don't think it would be available in the browser
  • reply
  • like

March 28, 2019 at 9:28pm
that plugin compiles the variables defined in something like .env at build time e.g. NODE_ENV=test in .env and process.env.NODE_ENV in code becomes "test" on build
  • reply
  • like

April 10, 2019 at 3:51pm
Ended up just using Now secrets
  • reply
  • like

September 6, 2019 at 1:52pm
Same here. Even Now Secrets isn't working for me.
  • reply
  • like