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

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