Next.js Discord

Discord Forum

getStaticProps returning undefined from Contentful

Answered
West African Lion posted this in #help-forum
Open in Discord
West African LionOP
So I'm trying to get a few FAQ questions & answers from Contentful, but I'm getting undefined for some reason. I checked that the keys are correct, and I've done this before with the exact same approach so I'm unsure what's going on. Any suggetions would be greatly appreciated!

export const getStaticProps = (async () => {
  const client = createClient({
    space: process.env.CONTENTFUL_SPACE_ID || "",
    accessToken: process.env.CONTENTFUL_ACCESS_KEY || "",
  });

  const res = await client.getEntries({ content_type: "faq" });
  
  return {
    props: {
      faqItems: res.items,
    },
    revalidate: 300,
  };
}) satisfies GetStaticProps;
Answered by Ray
you should use generateStaticParams instead of getStaticPaths in app router
View full answer

33 Replies

West African LionOP
I'm now realizing this this could be due to the component being marked as "use client". I tried setting this code up in the parent component but I get "getStaticProps" is not supported in app/.
Dose this mean I need to create a wrapper?
@West African Lion Dose this mean I need to create a wrapper?
Ray
if you are using app router, you can fetch the data directly in the server component
@Ray if you are using app router, you can fetch the data directly in the server component
West African LionOP
I see! Does that mean I just need to create a useEffect or something?
I'm not using the fetch api as I'm using the contentful package to handle all of that
@West African Lion I see! Does that mean I just need to create a useEffect or something?
Ray
no, you don't need useEffect to fetch data in server component
export default async function Page() {
  const res = await client.getEntries({ content_type: "faq" });

  ...
}
West African LionOP
Ahhhh got it!
Ray
the page will be static generated by default
West African LionOP
And this is only doable in server components? If you don't mind my asking, when is getStaticProps or getServerSideProps needed then?
Ray
getServerSideProps for dynamic data
getStaticProps for page generation
@Ray ts export default async function Page() { const res = await client.getEntries({ content_type: "faq" }); ... }
West African LionOP
The issue with this is that await I think, so I'll need to wrap it in a async func no?
Ray
both doesn't exist in app router
server component can be an async component
West African LionOP
Oh!
export default async function Home() { is valid then?
West African LionOP
I see!
Is this something I can read about in the docs? Seems like I'm working with outdated concepts 😦
West African LionOP
Thank you!
West African LionOP
Apologies for bugging you again @Ray, but I started running into this issue now - https://github.com/contentful/rich-text/issues/436

Since I'm using it in the body of the home page, I'm unsure how to resolve this. Any ideas?
@Ray what issue?
West African LionOP
Apologies, that was a dumb question, I figured it out. It created a small function at the bottom of the doc without me noticing which overwrote the one I was trying to import and use
Apologies
West African LionOP
I got pretty far, and can create links and the urls seems to be good, but for some reason the getStaticPaths isn't generating new pages. Any suggetions would be greatly appreicated!

This image should have all the code and folder structure needed. I tried for the last 2 hours but I'm so tried I must be missing something silly and the console.log isn't working 🤷‍♂️
Let me know if you have any luck figuring this out @Ray but no worries if not! You have already helped me so much ❤️
Answer
Ray
and you don't need getStaticProps there, it isn't doing anything in app router
@West African Lion Let me know if you have any luck figuring this out <@743561772069421169> but no worries if not! You have already helped me so much ❤️
Ray
forgot to mention, you could use export const dynamicParams = false for doing similar thing with blocking: false