0

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 *

enter image description here

In my NextJS code, I created the following:

enter image description here

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?

1 Answer 1

0

This blog might help.

An alternative approach for wildcard items in Sitecore XM Cloud: https://medium.com/@mitya_1988/an-alternative-approach-for-wildcard-items-in-sitecore-xm-cloud-69fd121b0d32

It's too big to post here so I made a summary:

The blog presents an alternative method to emulate wildcard items in Sitecore XM Cloud, diverging from previous approaches that utilized special components for item resolution. The focus is on reusing existing page components and the proof-of-concept demonstrated is tailored for static export during build time using the official XM Cloud starter kit. Modifications are made to middleware configurations, getStaticPaths, and getStaticProps to enable item resolution through a GraphQL query based on URL item names. Despite a challenge with exact match retrieval in GraphQL, the solution successfully generates pages on the desired /articles/* route, ready for deployment on XM Cloud and static hosting services.

Be aware that this is only a proof of concept.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.