How to correctly type an async Server Component in Next.js

I have a component in my Next.js project that uses async code to fetch data.

const H2: FC<HTMLAttributes<HTMLHeadingElement>> = ({
  className,
  ...props
}) => {}

const H2: FC<HTMLAttributes<HTMLHeadingElement>> = ({
  className,
  ...props
}) => {}

This was the code before and the type was working. Now I want to make this function async like so

const H2: FC<HTMLAttributes<HTMLHeadingElement>> = async ({
  className,
  ...props
}) => {

const H2: FC<HTMLAttributes<HTMLHeadingElement>> = async ({
  className,
  ...props
}) => {

Simply wrapping the FC type in a Promise<> doesn't work. I am not very well versed in complex Generics and how they work with Promises. How can I type this function correctly?

1 Reply

NickServ•17mo ago

Component return types should be inferred:

const H2 = async ({
  className,
  ...props
}: HTMLAttributes<HTMLHeadingElement>) => {

const H2 = async ({
  className,
  ...props
}: HTMLAttributes<HTMLHeadingElement>) => {

If you get a type error when rendering this component, your type dependencies are out of date

Gaming

Programming

How to correctly type an async Server Component in Next.js