🚨

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

2023/04/21に公開

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

エラー内容

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

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

  // エラー
  <Accounts />

## 解決方法
ServerComponentの前に型チェックしないように指示すれば解決します

  // これで大丈夫!!
  {/* @ts-expect-error Server Component */}
  <Accounts />

原因

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

GitHubで編集を提案

Discussion