Rewrite with-dotenv example (#4924)

## Issue

I decided to rewrite the [with-dotenv](https://github.com/zeit/next.js/tree/canary/examples/with-dotenv) using [dotenv-webpack](https://github.com/mrsteele/dotenv-webpack) example because:

- changes doesn't get applied  (#4748, brysgo/babel-plugin-inline-dotenv#13)
- the production mode doesn't work at all
- this approach has already been used in the [examples/relay-modern](9320d9f006/examples/with-relay-modern/next.config.js)
- it is [documented](https://webpack.js.org/plugins/environment-plugin/#dotenvplugin) by webpack

## Alternatives

* remove/deprecate example
* fix babel-plugin-inline-dotenv

## Related

Closes: #4748

examples/with-dotenv/.babelrc

@@ -1,13 +0,0 @@
-{
-  "presets": [
-    "next/babel",
-  ],
-  "env": {
-    "development": {
-      "plugins": ["inline-dotenv"]
-    },
-    "production": {
-      "plugins": ["transform-inline-environment-variables"]
-    }
-  }
-}

examples/with-dotenv/.env.production

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

examples/with-dotenv/README.md

@@ -41,16 +41,11 @@ now
 
 ## The idea behind the example
 
-This example shows the most basic idea of babel replacement from multiple environment. We have 1 env variable: `TEST` which will be replaced in development env and in production env with different babel plugin. In local development, babel reads .env file and replace process.env.* in your nextjs files. In production env (such as heroku), babel reads the ENV and replace process.env.* in your nextjs files. Thus no more needed to commit your secrets anymore.
+This example shows how to inline env vars. 
 
-Of course, please put .env* in your .gitignore when using this example locally.
+**Please note**:
 
-## Troubleshooting
+* 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.
-### Environment variables not showing on the page
+* 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)
-If for some reason the variable is not displayed on the page, try clearing the `babel-loader` cache:
-
-```
-rm -rf ./node_modules/.cache/babel-loader
-```

examples/with-dotenv/next.config.js

@@ -0,0 +1,22 @@
+require('dotenv').config()
+
+const path = require('path')
+const Dotenv = require('dotenv-webpack')
+
+module.exports = {
+  webpack: (config) => {
+    config.plugins = config.plugins || []
+
+    config.plugins = [
+      ...config.plugins,
+
+      // Read the .env file
+      new Dotenv({
+        path: path.join(__dirname, '.env'),
+        systemvars: true
+      })
+    ]
+
+    return config
+  }
+}

examples/with-dotenv/package.json

@@ -7,11 +7,10 @@
     "start": "next start"
   },
   "dependencies": {
+    "dotenv-webpack": "1.5.7",
     "next": "latest",
     "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react-dom": "^16.0.0"
-    "babel-plugin-inline-dotenv": "^1.1.1",
-    "babel-plugin-transform-inline-environment-variables": "^0.1.1"
   },
   "license": "ISC"
 }