1

I'm trying to fetch some data from an Api using the getStaticProps but when I pass it to my component It returns undefined.

Here is the code of the function :

export async function getStaticProps() {
  const res = (await fetch("https://links.papareact.com/pyp"))
  const data = await res.json()

 
  return{
    props :{
      info : data
    }
  }
  
}

And this is the code of my component :

export default function Home({info}) {
  return (
    <div>
      <Header/>
      <Banner/>
      <main className='max-w-7xl mx-auto px-8 sm:px-16' >
        <section>
          <h2 className='text-4xl font-semibold pb-5 pt-6'>Explore NearBy</h2>

          {/*Pull data from a server */}
            {info.map((item)=> {
              console.log(item)
            })}
        </section>
      </main>
    </div>
  );
    
}

After console.log I get undefined in the terminal

Abdessalam Semlali
  • 31
  • 3
  • what does `console.log(data)` logs in `getStaticProps`. run the fetching logic inside `try/catch` block and console the error inside `catch` – Yilmaz Jul 02 '23 at 03:01
  • Is that code all in the same file (it should), and is that component a page component, i.e. lives under the `pages` folder? – juliomalves Jul 02 '23 at 13:35
  • Yes its in the same file, and no i don't have a pages folder , when i used `npx create-next-app@latest` the pages are inside the App folder, so thats a page component that lives in the app `folder` – Abdessalam Semlali Jul 02 '23 at 15:40

1 Answers1

1

The problem was that I was using getStaticProps in an App router, when I rechecked the documentation, you can fetch the data directly if you're using the App Router.

here is the link if you'd like to read more about it :

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching

Abdessalam Semlali
  • 31
  • 3