Next.jsのPages RoterでSSRするときはどうやってコードを書くのか？

code:Products.tsx

type ProductProps = {

product: Product;

};

export const getServerSideProps = (async () => {

const product = await res.json();

return { props: { product } };

}) satisfies GetServerSideProps<ProductProps>;

export default function ProductPage({

product,

}: InferGetServerSidePropsType<typeof getServerSideProps>) {

return (

<ProductLayout>

<ProductContents product={product} />

</ProductLayout>

);

}

function ProductContents({ product }: ProductProps) {

return (

<>

<ProductHeader product={product} />

<ProductDetail product={product} />

<ProductFooter product={product} />

</>

);

}

// ...