diff --git a/next.config.js b/next.config.js index a3f3acb..7389a5e 100644 --- a/next.config.js +++ b/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, -// }); diff --git a/package.json b/package.json index 8898182..390379a 100644 --- a/package.json +++ b/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", diff --git a/pages/_document.js b/pages/_document.js index 42aa98e..4880d27 100644 --- a/pages/_document.js +++ b/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" /> - - + + { +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(), + enhanceApp: App => props => sheets.collect() }); 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(), - ], + + {initialProps.styles} + {sheets.getStyleElement()} + + ] }; }; diff --git a/server.js b/server.js index 9d93689..82b167f 100644 --- a/server.js +++ b/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]); diff --git a/yarn.lock b/yarn.lock index cb3dd18..882e679 100644 --- a/yarn.lock +++ b/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==