improve webpack build with dotenv and bundle analyzer

.env.example

@@ -0,0 +1 @@
+TEST=test

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 .next/
 out/
+.env

next.config.js

@@ -0,0 +1,36 @@
+require('dotenv').config();
+
+const path = require('path');
+const Dotenv = require('dotenv-webpack');
+
+const { ANALYZE } = process.env;
+
+module.exports = {
+  webpack: (config, { isServer }) => {
+    config.plugins = config.plugins || [];
+
+    config.plugins = [
+      ...config.plugins,
+
+      new Dotenv({
+        path: path.join(__dirname, '.env'),
+        safe: true,
+        systemvars: true,
+      }),
+    ];
+
+    if (ANALYZE) {
+      const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+
+      config.plugins.push(
+        new BundleAnalyzerPlugin({
+          analyzerMode: 'server',
+          analyzerPort: isServer ? 8888 : 8889,
+          openAnalyzer: true,
+        }),
+      );
+    }
+
+    return config;
+  },
+};

package.json

@@ -6,6 +6,7 @@
     "dev": "next",
     "prebuild": "rimraf .next",
     "build": "next build",
+    "analyze": "cross-env ANALYZE=1 next build",
     "start": "next start",
     "preexport": "rimraf out",
     "export": "next export",
@@ -17,12 +18,17 @@
     "@fortawesome/react-fontawesome": "^0.1.3",
     "classnames": "^2.2.6",
     "color": "^3.1.0",
+    "cross-env": "^5.2.0",
+    "dotenv": "^6.1.0",
+    "dotenv-webpack": "^1.5.7",
     "lodash.throttle": "^4.1.1",
     "next": "^7.0.2",
+    "now": "^12.0.1",
     "react": "^16.6.1",
     "react-dom": "^16.6.1",
     "react-ga": "^2.5.3",
-    "styled-components": "^4.0.3"
+    "styled-components": "^4.0.3",
+    "webpack-bundle-analyzer": "^3.0.3"
   },
   "devDependencies": {
     "babel-plugin-styled-components": "^1.8.0",

pages/index.jsx

@@ -13,6 +13,7 @@ const Index = () => (
     <Header />
     <main>
       <Hero />
+      <div>{process.env.TEST}</div>
     </main>
     <Footer />
   </>