Getting 503 ERROR: The request could not be satisfied. after adding getServerSideProps in the pages folder

I using the Next.js app for my project, that is hosted in AWS Amplify. All are working fine until I added getServerSideProps to call the Lambda function to get the data. It is for SEO purpose.

This is the code for getServerSideProps in pages folder

pages->categories->[categoriesId->[nftId].tsx

const NftDetails = dynamic(() => import('../../../components/NFTDetails'));
import dynamic from 'next/dynamic';

const CategoryNFT = (data: any) => {
  return <NftDetails props={data} />;
};
export default CategoryNFT;

export const getServerSideProps = async (context: any) => {
  const { nftId } = context.query;
  console.log('NFT ID ----> ', nftId);
  let requestOptions = {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  };
  const res = await fetch(
    `https://******.amazonaws.com/test/asset/get-asset-by-id?asset_id=${nftId}`,
    requestOptions
  );
  const data = await res.json();
  console.log(data);
  return {
    props: { data },
  };
};

In local everything works perfectly fine. But when I pushed the code to amplify. this particular route gives this error message.

I researched about it, I increased the lambda timeout function to 1 minute, previously it was 30 seconds. (but in aws docs it should be 3 seconds )

Also I checked the logs the amplify project, it says timeout after 30.2 seconds. that's it.

Does anyone knows how to resolve this issue. Thanks in advance.

After a while, I figured this out, In amplify settings, changing web-dynamic to web-computed solved this issue.