I am trying to fetch menu items from WordPress through Apollo client, but my getStaticProps function never gets called.

Here is what I currently have as my setup:

Navbar.jsx src/components/Navbar

import React from 'react'
import LanguageSelector from '../Language/LanguageSelector'
import "./NavbarElements.css"


const Navbar = ({ menuItems }) => {
    return (
        <div className='nav-container'>
            <div className='nav-wrapper'>
                <div className="left">Logo</div>
                <div className="right">
                    <div className="menu">
                        {menuItems?.map(menu=>{})}

                    </div>
                    <div className="translator">
                        <LanguageSelector />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Navbar

homepage.jsx src/pages/homepage:

import Navbar from '@/components/Navbar/Navbar';
import React from 'react'

export const getStaticProps = async () => {
  const apolloClient = client(); // Create an Apollo Client instance
  const { data } = await apolloClient.query({
    query: GET_MENUS,
  });
  console.log('data', data)
  return {
    props: { menuItems: data?.headerMenus?.nodes ?? [] }, revalidate: 1
  };

}

const HomePage = ({ menuItems }) => {
  return (
    <><Navbar menuItems={menuItems} /></>
  )
}

export default HomePage

page.jsx src/app:

import HomePage from "@/pages/homepage/homepage"

const Home = () => {
  return (
    <>
     <HomePage/>
    </>
  )
}

export default Home

This is apollo client configuration:

client.js src/apollo

"use client";

import { createHttpLink } from '@apollo/client';
import { ApolloClient, ApolloNextAppProvider, InMemoryCache, } from '@apollo/experimental-nextjs-app-support';


export const client = () => {
  //configuration for different GraphQL operation types
  const defaultOptions = {
    //queries that need to stay up-to-date with real-time server changes.
    watchQuery: {
      fetchPolicy: "no-cache",
      errorPolicy: "ignore",

    },
    //one-time data fetching
    query: {
      fetchPolicy: "no-cache",
      errorPolicy: "all",
    }
  }

  //   //Apollo Client won't store query results in memory by default
  const cache = new InMemoryCache({
    resultCaching: false,
  })

  // creates a link to your GraphQL server
  const link = createHttpLink({
    uri: `${process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL}/graphql`,
  })

  console.warn("URL", `${process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL}/graphql`)

  return new ApolloClient({
    link,
    cache,
    defaultOptions
  });
}


const ApolloWrapper = ({ children }) => {
  return (
    <ApolloNextAppProvider makeClient={client}>
      {children}
    </ApolloNextAppProvider>
  );
}


export default ApolloWrapper

And below is my project structure.

what could i be doing wrong?