Implement new next/config keys (#3909)

client/index.js

@@ -39,7 +39,10 @@ __webpack_public_path__ = `${assetPrefix}/_next/webpack/` //eslint-disable-line
 // Initialize next/asset with the assetPrefix
 asset.setAssetPrefix(assetPrefix)
 // Initialize next/config with the environment configuration
-envConfig.setConfig(runtimeConfig || {})
+envConfig.setConfig({
+  serverRuntimeConfig: {},
+  publicRuntimeConfig: runtimeConfig
+})
 
 const asPath = getURL()
 

readme.md

@@ -1150,11 +1150,11 @@ The `config` key allows for exposing runtime configuration in your app. All keys
 ```js
 // next.config.js
 module.exports = {
-  runtimeConfig: {
-    mySecret: 'secret',
-    public: {
-      staticFolder: '/static'
-    }
+  serverRuntimeConfig: { // Will only be available on the server side
+    mySecret: 'secret'
+  },
+  publicRuntimeConfig: { // Will be available on both server and client
+    staticFolder: '/static'
   }
 }
 ```
@@ -1162,12 +1162,13 @@ module.exports = {
 ```js
 // pages/index.js
 import getConfig from 'next/config'
-const config = getConfig()
-console.log(config.mySecret) // Will be 'secret' on the server, `undefined` on the client
-console.log(config.public.staticFolder) // Will be '/static' on both server and client
+const {serverRuntimeConfig, publicRuntimeConfig} = getConfig()
+
+console.log(serverRuntimeConfig.mySecret) // Will only be available on the server side
+console.log(publicRuntimeConfig.staticFolder) // Will be available on both server and client
 
 export default () => <div>
-  <img src={`${config.public.staticFolder}/logo.png`} />
+  <img src={`${publicRuntimeConfig.staticFolder}/logo.png`} />
 </div>
 ```
 

server/export.js

@@ -98,20 +98,17 @@ export default async function (dir, options, configuration) {
     availableChunks: getAvailableChunks(dir, nextConfig.distDir)
   }
 
-  // Allow configuration from next.config.js to be passed to the server / client
-  if (nextConfig.runtimeConfig) {
-    // Initialize next/config with the environment configuration
-    envConfig.setConfig(nextConfig.runtimeConfig)
+  const {serverRuntimeConfig, publicRuntimeConfig} = nextConfig
 
-    // Only the `public` key is exposed to the client side
-    // It'll be rendered as part of __NEXT_DATA__ on the client side
-    if (nextConfig.runtimeConfig.public) {
-      renderOpts.runtimeConfig = {
-        public: nextConfig.runtimeConfig.public
-      }
-    }
+  if (publicRuntimeConfig) {
+    renderOpts.runtimeConfig = publicRuntimeConfig
   }
 
+  envConfig.setConfig({
+    serverRuntimeConfig,
+    publicRuntimeConfig
+  })
+
   // set the assetPrefix to use for 'next/asset'
   setAssetPrefix(renderOpts.assetPrefix)
 

server/index.js

@@ -63,21 +63,21 @@ export default class Server {
       availableChunks: dev ? {} : getAvailableChunks(this.dir, this.dist)
     }
 
-    // Allow configuration from next.config.js to be passed to the server / client
-    if (this.nextConfig.runtimeConfig) {
-      // Initialize next/config with the environment configuration
-      envConfig.setConfig(this.nextConfig.runtimeConfig)
+    const {serverRuntimeConfig, publicRuntimeConfig, assetPrefix} = this.nextConfig
 
-      // Only the `public` key is exposed to the client side
-      // It'll be rendered as part of __NEXT_DATA__ on the client side
-      if (this.nextConfig.runtimeConfig.public) {
-        this.renderOpts.runtimeConfig = {
-          public: this.nextConfig.runtimeConfig.public
-        }
-      }
+    // Only the `publicRuntimeConfig` key is exposed to the client side
+    // It'll be rendered as part of __NEXT_DATA__ on the client side
+    if (publicRuntimeConfig) {
+      this.renderOpts.runtimeConfig = publicRuntimeConfig
     }
 
-    this.setAssetPrefix(this.nextConfig.assetPrefix)
+    // Initialize next/config with the environment configuration
+    envConfig.setConfig({
+      serverRuntimeConfig,
+      publicRuntimeConfig
+    })
+
+    this.setAssetPrefix(assetPrefix)
     this.defineRoutes()
   }
 

test/integration/config/next.config.js

@@ -6,10 +6,10 @@ module.exports = withCSS({
     maxInactiveAge: 1000 * 60 * 60
   },
   cssModules: true,
-  runtimeConfig: {
-    mySecret: 'secret',
-    public: {
-      staticFolder: '/static'
-    }
+  serverRuntimeConfig: {
+    mySecret: 'secret'
+  },
+  publicRuntimeConfig: {
+    staticFolder: '/static'
   }
 })

test/integration/config/pages/next-config.js

@@ -1,8 +1,7 @@
-// pages/index.js
 import getConfig from 'next/config'
-const config = getConfig()
+const {serverRuntimeConfig, publicRuntimeConfig} = getConfig()
 
 export default () => <div>
-  <p id='server-only'>{config.mySecret}</p>
-  <p id='server-and-client'>{config.public.staticFolder}</p>
+  <p id='server-only'>{serverRuntimeConfig.mySecret}</p>
+  <p id='server-and-client'>{publicRuntimeConfig.staticFolder}</p>
 </div>