How can I fetch data in a Next.js app using TypeScript?

How can I fetch data in a Next.js app using TypeScript?

You can use the getStaticProps or getServerSideProps functions to fetch data in Next.js. Which one are you interested in?

What's the difference between getStaticProps and getServerSideProps?

getStaticProps fetches data at build time, while getServerSideProps fetches data on each request. Do you need help with an example?

Yes, please provide an example using getStaticProps.

Sure! Here's a simple example:

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }, // will be passed to the page component as props
  };
}

Would you like to know how to use this data in your component?

Yes, how do I use the fetched data in my component?

You can access the fetched data via props in your component like this:

const MyComponent = ({ data }) => {
  return <div>{JSON.stringify(data)}</div>;
};

Let me know if you need further assistance!