Anyone able to help me on why the getStaticProps function isnt being called?

import HeroComponent from "../Components/Hero";
import PopularDestinations from "../Components/PopularDestinations";
import PopularDestinationsData from '../data/PopularDestinationsData';

const LandingPage = ({ popularDestinations }) => {

    console.log('Popular Landing' , popularDestinations)

    return (
        <div>
            <HeroComponent />
            <PopularDestinations popularDestinations={popularDestinations} />
        </div>
    );
};

export const getStaticProps = async () => {
    const data = PopularDestinationsData;
    console.log('Data', data);
    return {
        props: {
            popularDestinations: data,
        },
    };
};

export default LandingPage;

This in the directory pages btw