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
NickServ16mo 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
Want results from more Discord servers?
Add your server