Next.js 13でServer Componentを呼び出すとエラーになるので解消する(TypeScript)

Next.js 13でServer Componentを呼び出すとエラーになるので解消する(TypeScript)

エラー内容

'Accounts' を JSX コンポーネントとして使用することはできません。
その戻り値の型 'Promise<Element>' は、有効な JSX 要素ではありません。

AccountsというServer Componentを作成しましたが、page.tsxでそれを呼び出すとエラーになりました。

  // エラー
  <Accounts />

解決方法

Server Componentの前に型チェックをしないように指示すれば解決します。

  // これで解決します
  {/* @ts-expect-error Server Component */}
  <Accounts />

原因

バグです。
現在Next.js 13はBeta版で、TypeScriptのチームと解消に向けて取り組んでいるとのことです。
修正が完了するまでは型チェックをしないことで回避するしかなさそうです。