Since getStaticProps() is no longer an option, what is the correct way to fetch data from Sanity?

Example from their tutorial https://www.sanity.io/docs/connect-your-content-to-next-js, see image.

My code:

export const fetchData = async () => {
  const pets = await client.fetch(`*[_type == "pet"]`);

  return {
    props: {
      pets,
    },
  };
};

Something I noticed: I console.logged pets in my component and it showed undefined. I was, and still am, not sure why, trying to understand it. However, I deleted my block of code (including the Sanity client), and it still showed undefined. Something tells me that I made a mistake along the way, but I'm not sure.

So question about the data fetching, if my way is correct and if not, how I should do it?

Thanks everyone 🙂

----
Full code in case it's helpful:

import { createClient } from "next-sanity";

const Home = ({ pets }: any) => {
  console.log("Pets is: " + pets);

  return (
    <main>
        <h1>PETS?</h1>
        {pets?.length > 0 && (
          <ul>
            {pets.map((pet: any) => (
              <li key={pet._id}>{pet?.name}</li>
            ))}
          </ul>
        )}

        {/* @ts-ignore */}
        {!pets?.length > 0 && <p>No pets to show</p>} 
    </main>
  );
};

export default Home;

const client = createClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  dataset: "production",
  apiVersion: "2023-07-14",
  useCdn: false,
});

export const fetchData = async () => {
  const pets = await client.fetch(`*[_type == "pet"]`);

  return {
    props: {
      pets,
    },
  };
};

----