diff --git a/examples/with-dotenv/.env b/examples/with-dotenv/.env
index 4af484dc7ac3d54f3af075936492a0b7dc7aff60..d17198b3c62c1e87f6409c0811779ab5f8f78d54 100644
--- a/examples/with-dotenv/.env
+++ b/examples/with-dotenv/.env
@@ -1 +1 @@
-TEST=it works!
+TEST_VAR=it works!
diff --git a/examples/with-dotenv/next.config.js b/examples/with-dotenv/next.config.js
index 6719eff1134f320eee3308b1abfa76ecea20e710..1314d6cf1debf37662ee1462877170082ab2ef2b 100644
--- a/examples/with-dotenv/next.config.js
+++ b/examples/with-dotenv/next.config.js
@@ -1,22 +1,7 @@
 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
+  env: {
+    // Reference a variable that was defined in the .env file and make it available at Build Time
+    TEST_VAR: process.env.TEST_VAR,
   },
 }
diff --git a/examples/with-dotenv/package.json b/examples/with-dotenv/package.json
index f341c532a1093d12b07353c6975424bf8f064b9c..59af466497208c040c419b0fca60427f88592c21 100644
--- a/examples/with-dotenv/package.json
+++ b/examples/with-dotenv/package.json
@@ -7,7 +7,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "dotenv-webpack": "1.5.7",
+    "dotenv": "^8.2.0",
     "next": "latest",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
diff --git a/examples/with-dotenv/pages/index.js b/examples/with-dotenv/pages/index.js
index 9438592a086c8e6bcad3323b7071c8c59686cebf..73ed3e74e63bce4e3c0a5611a9af7c276b0d5425 100644
--- a/examples/with-dotenv/pages/index.js
+++ b/examples/with-dotenv/pages/index.js
@@ -1 +1 @@
-export default () => <div>{process.env.TEST}</div>
+export default () => <div>{process.env.TEST_VAR}</div>