LinkList/frontend/pages/index.tsx

import React from "react";
import { GetStaticProps } from "next";
import { Links } from "components";

// TODO: change
const API = "https://api.thedogapi.com/v1/breeds?limit=10&page=0";

export const getStaticProps: GetStaticProps = async () => {
  // fetch data here
  const data = await fetch(API).then((res) => res.json());

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

const Home: React.FC = ({ data }: any) => {
  return (
    <Links
      links={data.map((dog: any) => ({
        title: dog.name,
        url: "https://www.google.com/",
      }))}
    />
  );
};

export default Home;