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じゃダメだったんですね。。

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

参考記事

【TypeScript】.ts拡張子と.tsx拡張子 - Qiita

.ts拡張子と.tsx拡張子の違い .ts拡張子 純粋なTypeScriptファイル JSX要素の追加をサポートしない .tsx拡張子 JSXを含むファイル 型アサーションの記法として value as type と value の2通りあるが、後者...

Qiita qiita.com