my project
src/pages/index.js

Page.getLayout = function getLayout(page: ReactElement) {
return <MainLayout>{page}</MainLayout>;

};

MainLayout

 const MainLayout: FC<PropsWithChildren> =  ({children}) => {

    return (
        <>
            <Header
            />

            {children}

            <Footer/>
            <CookieWarning/>
        </>
    );
};

export default MainLayout;

page

<><MainPage /></>

MainPage

const getData =async ()=>{
   const response = await fetch("http://localhost:9000/api/cart/qty" )
   return  await response.json()
}


export default  async function  MainPage()  {
const data = await getData()
return (<div className={cn('main-page')}>
      <div className={cn('title-section')}>
          <div className={cn('title')}>
              <p>
                  some text
              </p>
              {/*{qty.qty}*/}
          </div>
      </div>
</div>)

Causes error

Unhandled Runtime Error
Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.