In todays lesson you are going to create dynamic pages using the getStaticPaths() method provided by NEXT.js. We created the landing page and the four category pages. On each of the category pages we added the items for each category. Today you will add the final piece of the project and that is getting more information on the category item.
- Make sure all your pages are completed.
- Make sure all your navigation links work.
- Category pages are finished.
- Category items are added.
- GitHub repo is up to date.
- uiux.jsx route path /uiux
- frontend.jsx route path /frontend
- backend.jsx route path /backend
- fullstack.jsx route path /fullstack
- login.jsx roue path /login
- index.js route path /
import {DeveloperBioLayout} from '../../components/layouts';
import {BioHeader, BioNavigation, BioTopic} from "../../components/developer-bio";
import { getDevelopers } from "../../libs/getDevelopers.js";
import { generateRandomTitle } from "../../libs/generateRandomTitle.js";
function SingleDeveloperPage({ avatar, fullName, city, heading, ...bio}) {
return (
<div className="max-w-2xl mx-auto py-20">
<BioNavigation avatar={avatar} fullName={fullName} />
<BioHeader city={city} fullName={fullName} heading={heading} />
<BioTopic topic="About Me" />
</div>
);
}
export default SingleDeveloperPage;
export async function getStaticPaths() {
const devs = await getDevelopers();
const paths = devs.map((dev) => ({ params: { uid: dev.uid } }));
return {
paths,
fallback: false,
};
}
export async function getStaticProps({ params }) {
const devs = await getDevelopers();
const dev = devs.find((dev) => dev.uid === params.uid);
const bio = { ...dev, heading: generateRandomTitle() };
return {
props: bio,
};
}
SingleDeveloperPage.getLayout = function getLayout(page) {
return (
<DeveloperBioLayout>
{page}
</DeveloperBioLayout>
)
}
import Head from "next/head";
export default function DeveloperBioLayout({children} ) {
const {fullName} = {...children.props}
return (
<>
<Head>
<title>{fullName}</title>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
{children}
</>
);
}