Sitecore NextJS, XM Cloud
I need to query an API and get a list of Authors. Let's assume there are 1000 authors.
In Sitecore, I created a folder called Authors and an item of template AuthorDetails called *
In my NextJS code, I created the following:
Within the path.tsx, I have the getStaticPaths and getStaticProps methods:
const SitecorePage = (props:IAuthorDetails): JSX.Element => {
return (
<>
<h1>AuthorDetails:</h1>
{/* {props?.displayName} */}
<head></head>
<AuthorDetails data={props} />
</>
);
};
export async function getStaticPaths() {
const res = await fetch('https://url')
const authors= await res.json() as IAuthorList;
const paths = authors?.output?.map((post) => ({
params: { path: post.ID}
}));
return {
paths,
fallback: false
};
};
export const getStaticProps: GetStaticProps = async (context) => {
const id = context?.params?.path;
const res = await fetch(`url&Id=${id}`)
const props = await res.json() as IAuthorDetails;
return {
props,
revalidate: 5,true
};
};
This works fine and when I run next:build, it generates all the author static HTML pages
However, when I try to access the page itself
http://server/authors/author-id
I get a 404
author-id does not map to the * wildcard.
Do I need to write a Custom Item resolver? If yes, How would I do this?
