Javascript – Server Side Component return type when it is async in NextJS 14

In NextJS 14, the example given in the docs is within the Page component, which I usually type as NextPage. This type doesn’t accept async await server component.

Similarly, what I tend to do is to wrap my own component and I always typed them as FunctionComponent<MyProps>. This also doesn’t work on async await server component that is given in the example.

What should the type be in this case instead of FunctionComponent / NextPage?

// FunctionComponent doesn't work here, TS error:  
// Type 'Promise<Element>' is missing the following properties from type 'ReactElement<any, any>': type, props, keyts(2322)
export const Header: FunctionComponent<HeaderProps> = async ({
  handleSidebarOpen,
}) => {
  const user = useUserSession();
  const userCredit = await getCredit(user.id);

Another example for NextPage:

// FunctionComponent doesn't work here, TS error:  
// Type '() => Promise<JSX.Element>' is not assignable to type 'FunctionComponent<{}>'.
export const MyPage: NextPage = async ({}) => {
  const userCredit = await getCredit(user.id);