Runtime Configs with process.env
June 28, 2018 at 5:48amThe 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:48amI'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 repoJune 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
June 30, 2018 at 8:04pm
January 24, 2019 at 3:27pm
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 nodeif (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})));
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.
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 buildApril 10, 2019 at 3:51pm
September 6, 2019 at 1:52pm