diff --git a/examples/with-dotenv/.babelrc b/examples/with-dotenv/.babelrc
deleted file mode 100644
index 4e6ec6c7..00000000
--- a/examples/with-dotenv/.babelrc
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "presets": [
-    "next/babel",
-  ],
-  "env": {
-    "development": {
-      "plugins": ["inline-dotenv"]
-    },
-    "production": {
-      "plugins": ["transform-inline-environment-variables"]
-    }
-  }
-}
diff --git a/examples/with-dotenv/.env.production b/examples/with-dotenv/.env.production
deleted file mode 100644
index 4af484dc..00000000
--- a/examples/with-dotenv/.env.production
+++ /dev/null
@@ -1 +0,0 @@
-TEST=it works!
diff --git a/examples/with-dotenv/README.md b/examples/with-dotenv/README.md
index 3830fceb..8063a3ab 100644
--- a/examples/with-dotenv/README.md
+++ b/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
-
-### Environment variables not showing on the page
-
-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
-```
+* 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)
diff --git a/examples/with-dotenv/next.config.js b/examples/with-dotenv/next.config.js
new file mode 100644
index 00000000..b7747be2
--- /dev/null
+++ b/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
+  }
+}
diff --git a/examples/with-dotenv/package.json b/examples/with-dotenv/package.json
index 1500daa0..89338702 100644
--- a/examples/with-dotenv/package.json
+++ b/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",
-    "babel-plugin-inline-dotenv": "^1.1.1",
-    "babel-plugin-transform-inline-environment-variables": "^0.1.1"
+    "react-dom": "^16.0.0"
   },
   "license": "ISC"
 }