Update `dotenv` example (#9372)

* Update next.config.js

* Update .env

* Update next.config.js

* Update package.json

* Apply lint-fix

* Update env var name

examples/with-dotenv/.env

-TEST=it works!
+TEST_VAR=it works!

examples/with-dotenv/next.config.js

 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,
   },
 }

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"

examples/with-dotenv/pages/index.js

-export default () => <div>{process.env.TEST}</div>
+export default () => <div>{process.env.TEST_VAR}</div>