Next.jsで、Layout用のコンポーネントを作成中、以下のエラーが発生しました。

  x Expected '>', got 'class'
    ,----
 11 | <div class="mainvisual">
    :      ^^^^^
    `----

該当コードは以下です。

/components/layout.ts

import { ReactElement } from "react";

type LayoutProps = Required<{
  readonly children: ReactElement;
}>;

const Layout = ({ children }: LayoutProps) => {
  return (
    <div>
      <div>
        <div className="mainvisual">

  ... 省略

        </div>
      </div>
    </div>
  );
};

export default Layout;

VSCodeで開発を行なっていて、lintのエラー等も表示されていなかったのですが、npm run devでエラーが表示されました。

原因

ファイル名が.tsだったのが原因でした。

layout.tsxに変更したところ、エラーがは消えました。

jsxが含まれる場合は.tsじゃダメだったんですね。。

あまり意識してなかったので、ちょっと詰まってました。

参考記事
https://qiita.com/y-hira18/items/f67cfc45a70c7c25708a