Next.js13, AppRouterでTS2786エラーが出たときの対処法

"next": "13.4.4"

エラー内容

TS2786: '〇〇' cannot be used as a JSX component.
Its return type 'Promise<Element>' is not a valid JSX element.
Type 'Promise<Element>' is missing the following properties from type 'ReactElement<any, any>': type, props, key

解決策

{/* @ts-expect-error Server Component */}を追加する

import { Suspense } from "react";
import { DownloadImage } from "./_components";

export default async function Page() {
  return (
    <main className="flex flex-col space-y-8 p-24">
      <h1 className="text-4xl font-bold">download-image</h1>
      <Suspense fallback={<div>loading...</div>}>
        {/* @ts-expect-error Server Component */}
        <DownloadImage />
      </Suspense>
    </main>
  );
}

参考

'SomeComponent' cannot be used as a JSX component. · Issue #42292 · vercel/next.js