Updated examples for build-time env configuration for v8 (#6237)

* Updated examples for build-time env configuration for v8

* Add comment to build time config example with how to include entire .env

examples/with-dotenv/README.md

@@ -46,6 +46,6 @@ This example shows how to inline env vars.
 **Please note**:
 
 * It is a bad practice to commit env vars to a repository. Thats why you should normally [gitignore](https://git-scm.com/docs/gitignore) your `.env` file.
-* As soon as you are using an env var in your code it will be publicly available and exposed to the client.
-* If you want to have more control of what is exposed to the client check out [tusbar/next-runtime-dotenv](https://github.com/tusbar/next-runtime-dotenv).
-* Env vars are set (inlined) at build time. If you need to configure your app on rutime check out [examples/with-universal-configuration-runtime](../with-universal-configuration-runtime)
+* In this example, as soon as you reference an env var in your code it will be automatically be publicly available and exposed to the client.
+* If you want to have more centralized control of what is exposed to the client check out the example [with-universal-configuration-build-time](../with-universal-configuration-build-time).
+* Env vars are set (inlined) at build time. If you need to configure your app on rutime check out [examples/with-universal-configuration-runtime](../with-universal-configuration-runtime).

examples/with-universal-configuration-build-time/.babelrc.js

@@ -1,6 +0,0 @@
-const env = require('./env-config.js')
-
-module.exports = {
-  presets: ['next/babel'],
-  plugins: [['transform-define', env]]
-}

examples/with-universal-configuration-build-time/.env

@@ -0,0 +1 @@
+TEST=it works!

examples/with-universal-configuration-build-time/README.md

@@ -41,13 +41,13 @@ now
 
 ## The idea behind the example
 
-This example shows how to use environment variables and customize one based on NODE_ENV for your application using [transform-define](https://github.com/FormidableLabs/babel-plugin-transform-define)
+This example shows how to use environment variables and customize one based on NODE_ENV for your application using `dotenv`, a `.env`-file and `next.config.js`.
 
 When you build your application the environment variable is transformed into a primitive (string or undefined) and can only be changed with a new build. This happens for both client-side and server-side. If the environment variable is used directly in your application it will only have an effect on the server side, not the client side.
 
-To set the environment variables in runtime you can follow the example [with-universal-configuration-runtime]((https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-universal-configuration-runtime))
+## Please note
 
-## Caveats
-
-- Because a babel plugin is used the output is cached in `node_modules/.cache` by `babel-loader`. When modifying the configuration you will have to manually clear this cache to make changes visible. Alternately, you may skip caching for `babel-loader` as shown [here](https://github.com/zeit/next.js/issues/1103#issuecomment-279529809).
-- This example sets the environment configuration at build time, meaning the same build might not be used in e.g. both staging and production. For a solution which sets the environment at runtime, see [here](https://github.com/zeit/next.js/issues/1488#issuecomment-289108931).
+- It is a bad practice to commit env vars to a repository. Thats why you should normally [gitignore](https://git-scm.com/docs/gitignore) your `.env` file.
+- Any env var you expose in `next.config.js` will be publicly available and exposed to the client.
+- This example sets the environment configuration at build time, meaning the same build might not be used in e.g. both staging and production. For a solution which sets the environment at runtime, see the example [with-universal-configuration-runtime](../with-universal-configuration-runtime).
+- If you have many variables in `.env` and want to expose them without listing them all in `next.config.js`, see the example [with-dotenv](../with-dotenv). That example automatically exposes any variable that has been referenced in code, but keeps all other variables secret.

examples/with-universal-configuration-build-time/env-config.js

@@ -1,8 +0,0 @@
-const prod = process.env.NODE_ENV === 'production'
-
-module.exports = {
-  'process.env.BACKEND_URL': prod
-    ? 'https://api.example.com'
-    : 'https://localhost:8080',
-  'process.env.VARIABLE_EXAMPLE': process.env.VARIABLE_EXAMPLE
-}

examples/with-universal-configuration-build-time/next.config.js

@@ -0,0 +1,45 @@
+const dotEnvResult = require('dotenv').config()
+
+const prod = process.env.NODE_ENV === 'production'
+
+if (dotEnvResult.error) {
+  throw dotEnvResult.error
+}
+
+module.exports = {
+  env: {
+    TEST: process.env.TEST,
+    BACKEND_URL: prod ? 'https://api.example.com' : 'https://localhost:8080'
+  }
+}
+
+/*
+  If you want to include every variable in .env automatically,
+  replace the above module.exports with the code below.
+
+  Warning: The below technique can be dangerous since it exposes every
+  variable in .env to the client. Even if you do not currently have
+  sensitive information there, it can be easy to forget about this when
+  you add variables in the future.
+
+  If you have many variables and want a safer way to conveniently expose
+  them, see the example "with-dotenv".
+*/
+
+/*
+const parsedVariables = dotEnvResult.parsed || {}
+const dotEnvVariables = {}
+
+// We always want to use the values from process.env, since dotenv
+// has already resolved these correctly in case of overrides
+for (const key of Object.keys(parsedVariables)) {
+  dotEnvVariables[key] = process.env[key]
+}
+
+module.exports = {
+  env: {
+    ...dotEnvVariables,
+    BACKEND_URL: prod ? 'https://api.example.com' : 'https://localhost:8080'
+  }
+}
+*/

examples/with-universal-configuration-build-time/package.json

@@ -12,7 +12,7 @@
     "react-dom": "^16.7.0"
   },
   "devDependencies": {
-    "babel-plugin-transform-define": "^1.3.0"
+    "dotenv": "^6.2.0"
   },
   "license": "ISC"
 }

examples/with-universal-configuration-build-time/pages/index.js

@@ -1,6 +1,6 @@
 export default () => (
   <div>
-    <p>Environment variable process.env.VARIABLE_EXAMPLE is "{process.env.VARIABLE_EXAMPLE}"</p>
+    <p>Environment variable process.env.TEST is "{process.env.TEST}"</p>
     <p>Custom environment variables process.env.BACKEND_URL is "{process.env.BACKEND_URL}"</p>
   </div>
 )