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 built-in getStaticProps or getServerSideProps functions in Next.js to fetch data. Would you like an example?

Yes, please provide an example using getStaticProps.

Sure! Here's a simple example:

import { GetStaticProps } from 'next';

const MyPage = ({ data }) => {
  return <div>{data.title}</div>;
};

export const getStaticProps: GetStaticProps = async () => {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
};

export default MyPage;

What if I want to fetch data on the client side instead?

You can use the useEffect hook along with fetch in your component. Would you like to see that example?