[...index].js

import styles from "../styles/Home.module.css";

const Header = ({ menu }) => {
  return (
    <div>
      Some cool logo
      <div>
        {menu.map(link => (
          <>
            <Link href={link.link} passHref>
              <a>{link.name}</a>
            </Link>{" "}
          </>
        ))}
      </div>
    </div>
  );
};

const Footer = ({ menu }) => {
  return (
    <footer className={styles.footer}>
      Copyright © verycoolsite.com
      <div>
        {menu.map(link => (
          <>
            <Link href={link.link} passHref>
              <a>{link.name}</a>
            </Link>{" "}
          </>
        ))}
      </div>
    </footer>
  );
};

function Index({ navigation, content }) {
  return (
    <div className={styles.container}>
      <Header menu={navigation.headerNav} />
      <Content content={content} />
      <Footer menu={navigation.footerNav} />
    </div>
  );
}

export async function getStaticProps(context) {
  const res = await fetch(
    `https://60ac26145a4de40017ccb8ce.mockapi.io/navigation`
  );
  const navigation = await res.json();

  const contentRes = await fetch(
    `https://60ac26145a4de40017ccb8ce.mockapi.io/content?${page}`
  );
  const content = await contentRes.json();

  return {
    props: { navigation, content, headline: page }
  };
}
export default Index;