Next.js Error with Dynamic Pages FUNCTION_INVOCATION_TIMEOUT

I have a page in my Next.js site (/flats/[id].js) in pages folder.

Here is my page

import React, { useState, useEffect } from "react";
import styled from "styled-components";

export default function FlatPage() {
  return (
    <Wrapper>
      <Meta title="FlatDetail" />
      <>Hello</>
    </Wrapper>
  );
}

const Wrapper = styled.div`
  padding: 20px;
`;

For some reason I get this error when navigating to the page.

This Serverless Function has timed out.

Your connection is working correctly.

Vercel is working correctly.

504: GATEWAY_TIMEOUT

Code: FUNCTION_INVOCATION_TIMEOUT

ID: fra1::kzjbt-1639939593230-a5edd370b414

CONSOLE LOGS:

[GET] /flats/16

15:35:23:41

Function Status: None

Edge Status: 504

Duration: 10009.74 ms

Init Duration: N/A

Memory Used: 243 MB

ID: ht6mw-1640010923026-45feee3fd9fb

User Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 15_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Mobile/15E148 Safari/604.1

2021-12-20T14:35:33.481Z 604f5a2d-3856-42c8-8a7c-72f1cc7d2b64 Task timed out after 10.01 seconds



[GET] /_next/data/qRevoA7v7ps_tbqeAEfjl/en/flats/16.json?id=16

15:35:11:99

Function Status: None

Edge Status: 504

Duration: 10007.67 ms

Init Duration: 397.63 ms
Memory Used: 284 MB
ID: ht6mw-1640010911602-b24295905176
User Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 15_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Mobile/15E148 Safari/604.1

2021-12-20T14:35:22.853Z 9bdd796b-22a9-4159-b97a-6c9392189986 Task timed out after 10.01 seconds

I have no idea why the function timed out (nothing much on the page), plus it works fine locally too.

Conditions for Serverless functions timeout From Next.js Docs

Timeout conditions checklist If you are seeing an execution timeout error, check the following possible causes:

The function isn't returning a response:

1. The function must return an HTTP response, even if that response is an error. If no response is returned, the function will time out.
2. The function is taking too long to process a request: Check that any API, or database requests you make in your function, are responding within the "Serverless Function Execution Timeout (Seconds)" limit applicable to your plan.
3. You have an infinite loop within your function: Check that your function is not making an infinite loop at any stage of execution.
4. There are upstream errors: Check that any external API or database that you are attempting to call doesn't have any errors.

1. I am not even using any server less function
2. No Database or api call
3. Nope
4. Just printing Hello!

UPDATE: I found this only happens with getServerSideProps, even if the props returned is "Hello World" as

export const getServerSideProps = async (context) => {
const h = "Hello World"

return {
  props:{h}
 }
}