GSP-m.js

const HomePage = (props) => {
	return (
    	<div>
        	<li></li>
            <li></li>
            <li></li>
        </div>
    )
}
// we always want to return an object with a key props
// The cool thing about this function is that instead of rendering the component function first we'll execute the getStaticProps function get our data and then render that data into the HomPage component.
export const getStaticProps = async() => {
    return {props: {
        products: [id: 'p1', title: 'Product 1']
    }}
}

export default HomePage