Universal runtime configuration in Next.js project using [node-config](https://github.com/lorenwest/node-config)
npm install next-configUniversal runtime configuration in Next.js project using node-config
``bash`
npm install --save config next-config
or
`bash`
yarn add config next-config
Create a next.config.js in your project
`js`
// next.config.js
const withConfig = require("next-config");
module.exports = withConfig();
Create a custom document pages/_document.js
`js
import Document, { Head, Main, NextScript } from "next/document";
import htmlescape from "next/dist/server/htmlescape";
import config from "config";
const __NEXT_CONFIG__ = { ...config };
// exclude server config
delete __NEXT_CONFIG__.server;
export default class extends Document {
render() {
return (
Create a config file
config/default.json`json
{
"universalConfigA": "UNIVERSAL_CONFIG_A",
"universalConfigB": "UNIVERSAL_CONFIG_B",
"server": {
"secretA": "SECRET_A",
"secretB": "SECRET_B"
}
}
`Create a page file
pages/index.js`js
import config from "config";const IndexPage = () => (
Hello World!
${config.get("universalConfigA")}
${config.get("universalConfigB")}
);IndexPage.getInitialProps = () => {
console.log(config.get("server.secretA"));
console.log(config.get("server.secretB"));
return {};
};
export default IndexPage;
`$3
Optionally you can add your custom Next.js configuration as parameter
`js
// next.config.js
const withConfig = require("next-config");
module.exports = withConfig({
webpack(config, options) {
return config;
}
});
``