こんにちは。nabeken5です。

解決策

該当するエラーについてのドキュメントには、

ファイルがページであることを意図している場合は、React Component で export ではなく export default を使用していることを再確認してください。すでに export default を使用している場合は、返される値が有効な React Component であることを確認してください。

Next.jsドキュメント（英語版）より。DeepLで和訳

と記載されています。
アロー関数に関する記述はないですが、 export default の利用で問題ないです。

エラーの原因

Reactコンポーネントに名前がついていないのが原因です。

アロー関数は、従来の関数（関数宣言、関数式）と比べ、関数自体に名前を付けないのが特徴です。

// 従来の関数(関数式)
[1, 2, 3].map(function (n) {
  return n + 1;
});
// アロー関数
[1, 2, 3].map((n) => n + 1);

サバイバルTypeScriptより。

アロー関数を定義(変数名をつけること)した場合でも、アロー関数自体は関数名を持ちません。

そのため、デバッグが難しい（関数名が確定しない）という問題があり、Reactコンポーネントでの定義時にエラーを出すようになったらしいです。

アロー関数として書くと（特に私が提供した例では）、信頼できる関数名が使えなくなり、デバッグに支障をきたします。コンポーネントは決してアロー関数であってはなりません。

Reactでは、アロー関数とそうでない関数の違いは他にありません。

jsx-eslint/eslint-plugin-react Issueでの@ljharbさん(jsx-eslint開発メンバー)の発言。DeepLで和訳

---

以上を踏まえ、PageやComponentの宣言ではアロー関数ではなくexport defaultを利用することをお勧めします。
（Next.jsドキュメントでもexport defaultになっています）

蛇足ですが、@ljharbさんの発言（Reactでは、アロー関数とそうでない関数の違いは他にありません。）の通り、通常の宣言時ではアロー関数と従来の関数の使い分けは問題ではないとされています。

Next.jsとReactでは、それは事実上まったく問題ではありません。

arrow関数と古い関数の主な違いは、古い関数にはthisオブジェクトがバインドされていることです。thisオブジェクトには、最近の開発者にはあまりなじみのない仕組みがあり、React開発ではあまり使われませんが、たとえばFastifyのようなバックエンドフレームワークでは、ときどきthisオブジェクトを使います。

また、hoistingもあります。これは、定義される前に何かを使用できることを意味しますが、私たちはモジュールで作業するので、これが問題になることはほとんどありません。

vercel/next.js Discussionでの@icyJosephさんの発言。DeepLで和訳

そのため、handlerなどを定義するときにアロー関数を使う分には全く問題はありません。

コードが見やすくなり、function内にも関数を定義できるため、短くシンプルな記述が可能になります。

通常のTypeScriptでのアロー関数と従来の関数の違いや使い分けについては、 サバイバルTypeScriptを参考にしてください。

参考

• Next.jsドキュメント

• jsx-eslint/eslint-plugin-reactドキュメント

• @sdorraさんのGitHub Issue

  const People = ({ params }: Props) => {
    const people = use(fetchPeople(params.id));
    return (
      <>
        <h1>{people.name}</h1>
      </>
    );
  };
  

  export default People;
  

  により、エラー Type error: Page "app/people/[id]/page.tsx" does not match the required types of a Next.js Page. が発生した事例

• @takudooonさんのZenn記事

  const Input = forwardRef((user, ref) => {
    // ...省略...
  )}
  

  により、エラー Component definition is missing display name react/display-nameが発生した事例

• @acro5pianoさんのQiita記事

  const createTabBarIcon = (iconName: string) => ({ tintColor, focused }: Props) => {
    return (
      <Icons
        name={iconName}
        size={26}
        style={{ color: tintColor }}
      />
    )
  }
  

  により、エラー Component definition is missing display name react/display-name が発生した事例

まだまだ自分も勉強中ですが、お役に立てれば幸いです。