我正在尝试用nextjs重写一个以前在React中完成的项目。我有一个简单的页面，它使用了getStaticProps沿着必需的盟友getStaticPaths。问题是，如果我控制台记录它，返回的数据（对象）是可用的，但不会显示在页面jsx上。我已经做了我所知道的一切都无济于事。getStaticProps和getStaticpaths如下：

export async function getStaticProps(context) {
    try {
    const slug = context.params.slug;
    const response = await fetch(`http://127.0.0.1:8000/api/product/${slug}/`);
    const data = await response.json();
    return {
        props: { product: data },
      };
    } catch (error) {
      console.log(error)  
    }
  }


export const getStaticPaths = async () => {
    try {
    const response =  await fetch(`http://127.0.0.1:8000/api/product/list/`);
    const data = await response.json();
    const allSlugs = data.map(item => item.slug)
    const paths= allSlugs.map(slug => ({params:{slug:slug}}))
    return {
        paths,
        fallback: false,
    }
    } catch (error) {
     console.log(error)   
    }
  }

页面jsx是：

function Product({product}){
    console.log(product) // This displays the product quite alright on the console
return <div>
The following did not work (blank), and no error message
    <h2>{product.name}</h2>
    <p> {product.price}</p>
</div>
}
export default Affidavit

就像我说的，页面上什么都没有显示，也没有任何错误。但是令人惊讶的是，返回的对象显示在控制台上。请问，这里有什么问题吗