light css fix

next.config.js

@@ -3,61 +3,10 @@ const withImages = require("next-images");
 const withSass = require("@zeit/next-sass");
 const webpack = require("webpack");
 const path = require("path");
-// const withCSS = require("@zeit/next-css");
-
-require("dotenv").config();
-
-// module.exports = withPlugins([[withSass], [withImages], [withCSS]], {
-// 	// env: {
-// 	// 	API_URL: process.env.API_URL,
-// 	// },
-// 	trailingSlash: true,
-// webpack(config, { dev }) {
-// 	if (dev) {
-// 		config.devtool = "cheap-module-source-map";
-// 	}
-// 	config.resolve.modules.push(path.resolve("./"));
-// 	return config;
-// },
-// 	generateEtags: false,
-// });
 
 module.exports = withPlugins([[withSass], [withImages]], {
-	trailingSlash: true,
-	generateEtags: false,
-	webpack(config, { dev }) {
-		if (dev) {
-			config.devtool = "cheap-module-source-map";
-		}
-		config.resolve.modules.push(path.resolve("./"));
-		return config;
-	},
+  webpack(config, options) {
+    config.resolve.modules.push(path.resolve("./"));
+    return config;
+  }
 });
-
-// module.exports = withSass({
-// 	cssModules: true,
-
-// 	cssLoaderOptions: {
-// 		importLoaders: 1,
-// 		localIdentName: "[local]_[hash:base64:5]",
-// 		url: false,
-// 	},
-// 	trailingSlash: true,
-// 	webpack(config, { dev }) {
-// 		if (dev) {
-// 			config.devtool = "cheap-module-source-map";
-// 		}
-// 		config.resolve.modules.push(path.resolve("./"));
-// 		return config;
-// 	},
-// 	...withImages({
-// 		webpack(config, { dev }) {
-// 			if (dev) {
-// 				config.devtool = "cheap-module-source-map";
-// 			}
-// 			config.resolve.modules.push(path.resolve("./"));
-// 			return config;
-// 		},
-// 	}),
-// 	generateEtags: false,
-// });

package.json

@@ -41,7 +41,6 @@
     "apollo-upload-client": "^14.1.3",
     "classnames": "2.2.6",
     "cross-fetch": "^3.0.6",
-    "dotenv": "^8.2.0",
     "graphql": "^15.3.0",
     "mdbreact": "^5.0.1",
     "moment": "2.25.3",

pages/_document.js

@@ -1,8 +1,7 @@
 import React from "react";
 import Document, { Head, Main, NextScript } from "next/document";
-import { ServerStyleSheets } from "@material-ui/core/styles";
-import "assets/scss/nextjs-material-kit.scss?v=1.1.0";
-import theme from "../theme";
+import { ServerStyleSheets } from "@material-ui/styles";
+
 class MyDocument extends Document {
   render() {
     return (
@@ -13,8 +12,8 @@ class MyDocument extends Document {
             name="viewport"
             content="width=device-width, initial-scale=1, shrink-to-fit=no"
           />
-          <meta name="theme-color" content={theme.palette.primary.main} />
-          <link rel="shortcut icon" href={require("assets/img/favicons.png")} />
+          <meta name="theme-color" content="#000000" />
+          <link rel="shortcut icon" href={require("assets/img/favicon.png")} />
           <link
             rel="apple-touch-icon"
             sizes="76x76"
@@ -41,23 +40,49 @@ class MyDocument extends Document {
   }
 }
 
-MyDocument.getInitialProps = async (ctx) => {
+MyDocument.getInitialProps = async ctx => {
+  // Resolution order
+  //
+  // On the server:
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. document.getInitialProps
+  // 4. app.render
+  // 5. page.render
+  // 6. document.render
+  //
+  // On the server with error:
+  // 1. document.getInitialProps
+  // 2. app.render
+  // 3. page.render
+  // 4. document.render
+  //
+  // On the client
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. app.render
+  // 4. page.render
+
+  // Render app and page and get the context of the page with collected side effects.
   const sheets = new ServerStyleSheets();
   const originalRenderPage = ctx.renderPage;
 
   ctx.renderPage = () =>
     originalRenderPage({
-      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
+      enhanceApp: App => props => sheets.collect(<App {...props} />)
     });
 
   const initialProps = await Document.getInitialProps(ctx);
 
   return {
     ...initialProps,
+    // Styles fragment is rendered after the app and page rendering finish.
     styles: [
-      ...React.Children.toArray(initialProps.styles),
-      sheets.getStyleElement(),
-    ],
+      <React.Fragment key="styles">
+        {initialProps.styles}
+        {sheets.getStyleElement()}
+      </React.Fragment>
+    ]
   };
 };
 

server.js

@@ -1,27 +1,33 @@
-// const { createServer } = require("http");
-// const { parse } = require("url");
-// const next = require("next");
+const { createServer } = require("http");
+const { parse } = require("url");
+const next = require("next");
 const cli = require("next/dist/cli/next-start");
-// const dev = process.env.NODE_ENV !== "production";
-// const app = next({ dev });
-// const handle = app.getRequestHandler();
-require("dotenv").config();
+const dev = process.env.NODE_ENV !== "production";
+const app = next({ dev });
+const handle = app.getRequestHandler();
+// require("dotenv").config();
 
 const port = process.env.PORT || "14009";
 
-// app.prepare().then(() => {
-// 	createServer((req, res) => {
-// 		const parsedUrl = parse(req.url, true);
-// 		const { pathname, query } = parsedUrl;
-// 		// if (!pathname.includes("_next")) {
-// 		console.log(pathname);
-// 		// 	app.render(req, res, pathname, query);
-// 		// }
-// 		app.render(req, res, "/abous_us/aboutus", query);
-// 	}).listen(port, (err) => {
-// 		if (err) throw err;
-// 		console.log(`Ready on port ${port}`);
-// 	});
-// });
+app.prepare().then(() => {
+	createServer((req, res) => {
+		const parsedUrl = parse(req.url, true);
+		const { pathname, query } = parsedUrl;
+		if (pathname === "/") {
+			app.render(req, res, "/home", query);
+		}
+		// else if (pathname === "/bookingservice/") {
+		//   app.render(req, res, "/BookingService", query);
+		// } else if (pathname === "/statuspengajuan/") {
+		//   app.render(req, res, "/StatusPengajuan", query);
+		// }
+		else {
+			handle(req, res, parsedUrl);
+		}
+	}).listen(port, (err) => {
+		if (err) throw err;
+		console.log(`Ready on port ${port}`);
+	});
+});
 
-cli.nextStart(["-p", port]);
+// cli.nextStart(["-p", port]);

yarn.lock

@@ -3688,7 +3688,7 @@ dot-prop@^5.2.0:
   dependencies:
     is-obj "^2.0.0"
 
-dotenv@^8.0.0, dotenv@^8.2.0:
+dotenv@^8.0.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
   integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==