Add Error when using publicRuntimeConfig with target serverless and add buildVars (#6212)

Introduce env to next.config.js for build-time configuration

errors/serverless-publicRuntimeConfig.md

@@ -0,0 +1,22 @@
+# Using `publicRuntimeConfig` with `target` set to `serverless`
+
+#### Why This Error Occurred
+
+In the `serverless` target environment `next.config.js` is not loaded, so we don't support `publicRuntimeConfig`.
+#### Possible Ways to Fix It
+
+Use config option `env` to set **build time** variables like such:
+
+```js
+// next.config.js
+module.exports = {
+  env: {
+    special: "value"
+  }
+}
+```
+
+```js
+// pages/index.js
+console.log(process.env.special) // value
+```

packages/next/README.md

@@ -1551,7 +1551,49 @@ The `modules` option on `"preset-env"` should be kept to `false` otherwise webpa
 
 ### Exposing configuration to the server / client side
 
-The `next/config` module gives your app access to runtime configuration stored in your `next.config.js`. Place any server-only runtime config under a `serverRuntimeConfig` property and anything accessible to both client and server-side code under `publicRuntimeConfig`.
+There is a common need in applications to provide configuration values.
+
+Next.js supports 2 ways of providing configuration:
+
+- Build-time configuration
+- Runtime configuration
+
+#### Build time configuration
+
+The way build-time configuration works is by inlining the provided values into the Javascript bundle.
+
+You can add the `env` key in `next.config.js`:
+
+```js
+// next.config.js
+module.exports = {
+  env: {
+    customKey: 'value'
+  }
+}
+```
+
+This will allow you to use `process.env.customKey` in your code. For example:
+
+```jsx
+// pages/index.js
+export default function Index() {
+  return <h1>The value of customEnv is: {process.env.customEnv}</h1>
+}
+```
+
+#### Runtime configuration
+
+> :warning: Note that this option is not available when using `target: 'serverless'`
+
+> :warning: Generally you want to use build-time configuration to provide your configuration. 
+The reason for this is that runtime configuration adds a small rendering / initialization overhead.
+
+The `next/config` module gives your app access to the `publicRuntimeConfig` and `serverRuntimeConfig` stored in your `next.config.js`. 
+
+Place any server-only runtime config under a `serverRuntimeConfig` property.
+
+Anything accessible to both client and server-side code should be under `publicRuntimeConfig`.
 
 ```js
 // next.config.js

packages/next/build/index.ts

@@ -48,6 +48,8 @@ export default async function build (dir: string, conf = null): Promise<void> {
 
   let result: CompilerResult = {warnings: [], errors: []}
   if (config.target === 'serverless') {
+    if (config.publicRuntimeConfig) throw new Error('Cannot use publicRuntimeConfig with target=serverless https://err.sh/zeit/next.js/serverless-publicRuntimeConfig')
+
     const clientResult = await runCompiler([configs[0]])
     // Fail build if clientResult contains errors
     if(clientResult.errors.length > 0) {

packages/next/build/webpack-config.js

@@ -291,10 +291,18 @@ export default async function getBaseWebpackConfig (dir, {dev = false, isServer
       dev && new CaseSensitivePathPlugin(), // Since on macOS the filesystem is case-insensitive this will make sure your path are case-sensitive
       !dev && new webpack.HashedModuleIdsPlugin(),
       // Removes server/client code by minifier
-      new webpack.DefinePlugin({
+      new webpack.DefinePlugin(Object.assign(
-        'process.crossOrigin': JSON.stringify(config.crossOrigin),
+        {},
-        'process.browser': JSON.stringify(!isServer)
+        config.env ? Object.keys(config.env)
-      }),
+          .reduce((acc, key) => ({
+            ...acc,
+            ...{ [`process.env.${key}`]: JSON.stringify(config.env[key]) }
+          }), {}) : {},
+        {
+          'process.crossOrigin': JSON.stringify(config.crossOrigin),
+          'process.browser': JSON.stringify(!isServer)
+        }
+      )),
       // This is used in client/dev-error-overlay/hot-dev-client.js to replace the dist directory
       !isServer && dev && new webpack.DefinePlugin({
         'process.env.__NEXT_DIST_DIR': JSON.stringify(distDir)

test/integration/config/next.config.js

@@ -15,6 +15,9 @@ module.exports = withCSS(withSass({
   publicRuntimeConfig: {
     staticFolder: '/static'
   },
+  env: {
+    customVar: 'hello'
+  },
   webpack (config, {buildId}) {
     // When next-css is `npm link`ed we have to solve loaders from the project root
     const nextLocation = path.join(require.resolve('next/package.json'), '../')

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

@@ -4,4 +4,5 @@ const {serverRuntimeConfig, publicRuntimeConfig} = getConfig()
 export default () => <div>
   <p id='server-only'>{serverRuntimeConfig.mySecret}</p>
   <p id='server-and-client'>{publicRuntimeConfig.staticFolder}</p>
+  <p id='env'>{process.env.customVar}</p>
 </div>

test/integration/config/test/client.js

@@ -14,9 +14,11 @@ export default (context, render) => {
 
       const serverText = await browser.elementByCss('#server-only').text()
       const serverClientText = await browser.elementByCss('#server-and-client').text()
+      const envValue = await browser.elementByCss('#env').text()
 
       expect(serverText).toBe('')
       expect(serverClientText).toBe('/static')
+      expect(envValue).toBe('hello')
       browser.close()
     })