Fix - HTML export failing

data/roadmaps.json

@@ -2,19 +2,19 @@
   {
     "title": "Frontend Developer",
     "description": "Roadmap to becoming a frontend developer",
-    "slug": "frontend",
+    "slug": "/frontend",
     "picture": "/static/roadmaps/frontend.png"
   },
   {
     "title": "Backend Developer",
     "description": "Roadmap to becoming a backend developer",
-    "slug": "backend",
+    "slug": "/backend",
     "picture": "/static/roadmaps/backend.png"
   },
   {
     "title": "DevOps",
     "description": "Roadmap for DevOps or any other Operations Role",
-    "slug": "devops",
+    "slug": "/devops",
     "picture": "/static/roadmaps/devops.png"
   }
 ]

lib/server.js

@@ -0,0 +1,14 @@
+/**
+ * Makes sure that the props are fetched only on server and not in browser
+ * @param callback
+ * @returns {Function}
+ */
+export const serverOnlyProps = (callback) => {
+  return async (props) => {
+    if (process.browser) {
+      return __NEXT_DATA__.props.pageProps;
+    }
+
+    return await callback(props)
+  };
+};

next.config.js

@@ -8,12 +8,13 @@ module.exports = withCSS(withSass({
       '/about': { page: '/about' },
       '/privacy': { page: '/privacy' },
       '/terms': { page: '/terms' },
-      '/frontend': { page: '/frontend' },
-      '/backend': { page: '/backend' },
-      '/devops': { page: '/devops' },
-      '/roadmaps/frontend': { page: '/roadmaps/frontend' },
-      '/roadmaps/backend': { page: '/roadmaps/backend' },
-      '/roadmaps/devops': { page: '/roadmaps/devops' },
+      '/roadmaps': { page: '/roadmaps' },
+      '/frontend': { page: '/[fallback]', query: "frontend" },
+      '/backend': { page: '/[fallback]', query: "backend" },
+      '/devops': { page: '/[fallback]', query: "devops" },
+      '/roadmaps/frontend': { page: '/roadmaps/[roadmap]', query: "frontend" },
+      '/roadmaps/backend': { page: '/roadmaps/[roadmap]', query: "backend" },
+      '/roadmaps/devops': { page: '/roadmaps/[roadmap]', query: "devops" },
     };
   },
 

pages/[fallback].js

@@ -1,19 +1,21 @@
-import { useRouter } from 'next/router';
 import Roadmap from './roadmaps/[roadmap]';
 import roadmapsList from "../data/roadmaps.json";
+import { serverOnlyProps } from '../lib/server';
 
 // Fallback page to handle the old roadmap pages implementation
-const OldRoadmap = () => {
-  const router = useRouter();
-  const { fallback } = router.query;
-
-  // Render the roadmap if it exists, otherwise 404
-  const roadmapExists = !!roadmapsList.find(roadmap => roadmap.slug === fallback);
-  if (roadmapExists) {
-    return <Roadmap roadmap={ fallback } />
+const OldRoadmap = ({ roadmap }) => {
+  if (roadmap) {
+    return <Roadmap roadmap={ roadmap } />
   }
 
-  return <h1>404</h1>;
+  return <h1>404</h1>
 };
 
+OldRoadmap.getInitialProps = serverOnlyProps(({ req }) => {
+  return {
+    roadmap: roadmapsList.find(roadmap => roadmap.slug === req.url),
+  };
+});
+
+
 export default OldRoadmap;

pages/roadmaps/[roadmap].js

@@ -1,27 +1,24 @@
-import { useRouter } from 'next/router';
+import roadmaps from "../../data/roadmaps";
 import DefaultLayout from '../../layouts/default/index';
 import PageHeader from '../../components/page-header/index';
-// import roadmaps from "../../data/roadmaps";
-
-const Roadmap = (props) => {
-  const router = useRouter();
-  const {
-    roadmap: slug,
-  } = router.query;
-
-  console.log(router);
-
-  // @todo handle 404
-  // const roadmap = roadmaps.find(roadmap => roadmap.slug === slug);
+import { serverOnlyProps } from '../../lib/server';
 
+const Roadmap = ({ roadmap }) => {
   return (
     <DefaultLayout>
       <PageHeader />
       <div className="container">
-        {/*<img src={ roadmap.picture } alt="" />*/}
+        <img src={ roadmap.picture } alt="" />
       </div>
     </DefaultLayout>
   );
 };
 
+Roadmap.getInitialProps = serverOnlyProps(({ req }) => {
+  const normalizedUrl = req.url.replace('roadmaps/', '');
+  return {
+    roadmap: roadmaps.find(roadmap => roadmap.slug === normalizedUrl),
+  };
+});
+
 export default Roadmap;