0

Note that this question is tagged . Familiarity with Next.js is essential for understanding the relationship between the getStaticProps and Home functions in the code below.

export async function getStaticProps() {
  const dummyData = [
    {
      id: '1',
      name: 'john'
    },
    {
      id: '2',
      name: 'Tom'
    }
  ];
  return {
    props: { data:dummyData }
  };
}

export default function Home({ data }) {
  console.log(data);
  return (
    <ul>
      <li>USER</li>
      {data && data.map((user) => (
        <li key={user.id}>
          {user.name}
        </li>
      ))}
    </ul>
  );
}

I try to send data to the Home function using getStaticProps, but when I console.log it, it shows undefined.

I want to receive the data from getStaticProps().

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
LTJ
  • 1
  • Should be working. Is this code in a files in the pages folder? – Jap Mul Jun 06 '23 at 09:47
  • [getStaticProps isn't supported in the new App router](https://nextjs.org/docs/app/building-your-application/data-fetching#old-methods), perhaps you should switch to the modern approach for data fetching instead of trying to get the old way to work. – Quentin Jun 06 '23 at 10:36
  • @Quentin thanks bro, i wasn;t realised it until you told me, i use the APP router. Now i know getStaticProps isn't supported anymore . Huge Thanks – LTJ Jun 07 '23 at 10:28
  • Oh, I assumed you weren't using the app router because, when I did and tried to use getStaticProps, I got a big error message about on the terminal where I was running the Node app and you didn't mention getting one of those. – Quentin Jun 07 '23 at 18:18

1 Answers1

0

You just declared the Home component, but you haven't called and passed the value to it yet. At place you call component Home, you must pass value for data like this

<App>
  <Home data={[1,2,3,4]} />
</App>
Tuấn Vũ Quý
  • 37
  • 3
  • `Home` is, presumably, a **page** component and not one that is called as a child of another component. The Next.js framework is responsible for calling it and passing props to it, not the developer. – Quentin Jun 06 '23 at 10:14