Fix - HTML export failing
This commit is contained in:
@ -2,19 +2,19 @@
|
|||||||
{
|
{
|
||||||
"title": "Frontend Developer",
|
"title": "Frontend Developer",
|
||||||
"description": "Roadmap to becoming a frontend developer",
|
"description": "Roadmap to becoming a frontend developer",
|
||||||
"slug": "frontend",
|
"slug": "/frontend",
|
||||||
"picture": "/static/roadmaps/frontend.png"
|
"picture": "/static/roadmaps/frontend.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Backend Developer",
|
"title": "Backend Developer",
|
||||||
"description": "Roadmap to becoming a backend developer",
|
"description": "Roadmap to becoming a backend developer",
|
||||||
"slug": "backend",
|
"slug": "/backend",
|
||||||
"picture": "/static/roadmaps/backend.png"
|
"picture": "/static/roadmaps/backend.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "DevOps",
|
"title": "DevOps",
|
||||||
"description": "Roadmap for DevOps or any other Operations Role",
|
"description": "Roadmap for DevOps or any other Operations Role",
|
||||||
"slug": "devops",
|
"slug": "/devops",
|
||||||
"picture": "/static/roadmaps/devops.png"
|
"picture": "/static/roadmaps/devops.png"
|
||||||
}
|
}
|
||||||
]
|
]
|
14
lib/server.js
Normal file
14
lib/server.js
Normal file
@ -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)
|
||||||
|
};
|
||||||
|
};
|
@ -8,12 +8,13 @@ module.exports = withCSS(withSass({
|
|||||||
'/about': { page: '/about' },
|
'/about': { page: '/about' },
|
||||||
'/privacy': { page: '/privacy' },
|
'/privacy': { page: '/privacy' },
|
||||||
'/terms': { page: '/terms' },
|
'/terms': { page: '/terms' },
|
||||||
'/frontend': { page: '/frontend' },
|
'/roadmaps': { page: '/roadmaps' },
|
||||||
'/backend': { page: '/backend' },
|
'/frontend': { page: '/[fallback]', query: "frontend" },
|
||||||
'/devops': { page: '/devops' },
|
'/backend': { page: '/[fallback]', query: "backend" },
|
||||||
'/roadmaps/frontend': { page: '/roadmaps/frontend' },
|
'/devops': { page: '/[fallback]', query: "devops" },
|
||||||
'/roadmaps/backend': { page: '/roadmaps/backend' },
|
'/roadmaps/frontend': { page: '/roadmaps/[roadmap]', query: "frontend" },
|
||||||
'/roadmaps/devops': { page: '/roadmaps/devops' },
|
'/roadmaps/backend': { page: '/roadmaps/[roadmap]', query: "backend" },
|
||||||
|
'/roadmaps/devops': { page: '/roadmaps/[roadmap]', query: "devops" },
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -1,19 +1,21 @@
|
|||||||
import { useRouter } from 'next/router';
|
|
||||||
import Roadmap from './roadmaps/[roadmap]';
|
import Roadmap from './roadmaps/[roadmap]';
|
||||||
import roadmapsList from "../data/roadmaps.json";
|
import roadmapsList from "../data/roadmaps.json";
|
||||||
|
import { serverOnlyProps } from '../lib/server';
|
||||||
|
|
||||||
// Fallback page to handle the old roadmap pages implementation
|
// Fallback page to handle the old roadmap pages implementation
|
||||||
const OldRoadmap = () => {
|
const OldRoadmap = ({ roadmap }) => {
|
||||||
const router = useRouter();
|
if (roadmap) {
|
||||||
const { fallback } = router.query;
|
return <Roadmap roadmap={ roadmap } />
|
||||||
|
|
||||||
// Render the roadmap if it exists, otherwise 404
|
|
||||||
const roadmapExists = !!roadmapsList.find(roadmap => roadmap.slug === fallback);
|
|
||||||
if (roadmapExists) {
|
|
||||||
return <Roadmap roadmap={ fallback } />
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return <h1>404</h1>;
|
return <h1>404</h1>
|
||||||
};
|
};
|
||||||
|
|
||||||
|
OldRoadmap.getInitialProps = serverOnlyProps(({ req }) => {
|
||||||
|
return {
|
||||||
|
roadmap: roadmapsList.find(roadmap => roadmap.slug === req.url),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
export default OldRoadmap;
|
export default OldRoadmap;
|
@ -1,27 +1,24 @@
|
|||||||
import { useRouter } from 'next/router';
|
import roadmaps from "../../data/roadmaps";
|
||||||
import DefaultLayout from '../../layouts/default/index';
|
import DefaultLayout from '../../layouts/default/index';
|
||||||
import PageHeader from '../../components/page-header/index';
|
import PageHeader from '../../components/page-header/index';
|
||||||
// import roadmaps from "../../data/roadmaps";
|
import { serverOnlyProps } from '../../lib/server';
|
||||||
|
|
||||||
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);
|
|
||||||
|
|
||||||
|
const Roadmap = ({ roadmap }) => {
|
||||||
return (
|
return (
|
||||||
<DefaultLayout>
|
<DefaultLayout>
|
||||||
<PageHeader />
|
<PageHeader />
|
||||||
<div className="container">
|
<div className="container">
|
||||||
{/*<img src={ roadmap.picture } alt="" />*/}
|
<img src={ roadmap.picture } alt="" />
|
||||||
</div>
|
</div>
|
||||||
</DefaultLayout>
|
</DefaultLayout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Roadmap.getInitialProps = serverOnlyProps(({ req }) => {
|
||||||
|
const normalizedUrl = req.url.replace('roadmaps/', '');
|
||||||
|
return {
|
||||||
|
roadmap: roadmaps.find(roadmap => roadmap.slug === normalizedUrl),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
export default Roadmap;
|
export default Roadmap;
|
Reference in New Issue
Block a user