menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

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
}
}
It's as simple as just using process.env.SOMETHING as value 👍

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.
Oh! I think I figured it out. Instead of using babel, I used this package:

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

June 30, 2018 at 8:04pm

January 24, 2019 at 3:27pm
A follow-up question on this - I'm using the following code in next.config.js file...
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
and when I'm debugging in the browser, the process.env keeps showing up EMPTY. Any suggestion as to why?

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

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

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

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