问在nextjs中预渲染页面时出错

EN

Error occurred prerendering page "/componentList/trending". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of undefined (reading 'map')
    at Trending (F:\react\test\.next\server\chunks\949.js:67:33)
    at d (F:\react\test\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:33:498)
    at bb (F:\react\test\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:36:16)
    at a.b.render (F:\react\test\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:42:43)
    at a.b.read (F:\react\test\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:41:83)
    at Object.exports.renderToString (F:\react\test\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:52:138)
    at Object.renderPage (F:\react\test\node_modules\next\dist\server\render.js:596:45)
    at Function.getInitialProps (F:\react\test\.next\server\pages\_document.js:601:19)
    at Object.loadGetInitialProps (F:\react\test\node_modules\next\dist\shared\lib\utils.js:69:29)
    at renderDocument (F:\react\test\node_modules\next\dist\server\render.js:609:48)
[    ] info  - Generating static pages (7/10)undefined
[=   ] info  - Generating static pages (7/10)[

import Layout from '../components/layout';
import 'semantic-ui-css/semantic.min.css';
import Trending from './componentList/trending';
function Home({ trend }) {
  return (
    <> 
    <Layout>
      <Trending trend={trend}/>
      </Layout>
    </>
  );
}

export async function getServerSideProps(context) {
  // treding
  const trending = await fetch('https://lat.enapp.ae/api/v5/web/home',{
    method:'POST',
    body: JSON.stringify({ title: "React POST Request Example" }),
    headers: { "Content-Type": "application/json" },

  })
  const trendingApi = await trending.json();
  const trend=trendingApi.sections.trending;
  
  return {
    props: {
      trend,
    },
  };
}

export default Home;

// import img from 'next/img';
import React, { Component } from 'react';    
import { Grid } from "semantic-ui-react";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick"; 
function Trending(props) { 
  var settings = { 
  slidesToShow: 5,
  autoplay:true,
  autoplaySpeed:2000,
  
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: true, 
        slidesToShow: 3, 
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: true, 
        slidesToShow: 2
      }
    }
  ]
  };
  return (
    <>
    
    <Grid className="slider-two">
        <Grid.Column width={1}></Grid.Column>
        <Grid.Column width={14}>
          <h1 className="trending-store">
            Trending Stores
          </h1>
          <Slider {...settings}>
    {props.trend.map((x,i) =>(
         <div className="item" key={i}>
         <a href={x.store_url}>
           <img src={x.logo} alt="" className="trending-img" layout='fill'/>
         </a>
         <a href={x.store_url}>
           <h4>{x.store_name}</h4>
         </a>
         <p class="cash">CASH REWARDS UPTO</p>
         <p class="amount">AED {x.cashback}</p>
       </div>
          ))}
          </Slider>
          </Grid.Column>
        <Grid.Column width={1}></Grid.Column>
      </Grid>
    
          
       
    </>
  )
}
export default Trending;

const trending = await axios.post('https://lat.epapp.ae/api/v5/web/home',{
    method:'POST',
    body: JSON.stringify({ title: "React POST Request Example" }),
    headers: { "Content-Type": "application/json" },

  })