Next.js+TypeScript遇ESLint错误：函数组件非函数声明

你遇到的错误来自ESLint的react/function-component-definition规则，这个规则默认强制要求函数组件必须以函数声明的形式定义，同时你第二次尝试的写法还存在类型使用错误。下面是具体的解决方法：

方法1：改用符合规则的函数声明写法 #

直接用函数声明，并正确给函数添加NextPage类型注解：

import type { NextPage } from "next";

export default function Home(): NextPage {
  return (
    <div>Home</div>
  );
}

方法2：修改ESLint规则，允许箭头函数写法 #

如果你更习惯用箭头函数，可以调整ESLint配置，放宽这个规则的限制。找到你的ESLint配置文件（比如.eslintrc.json、.eslintrc.js），添加或修改react/function-component-definition规则：

{
  "rules": {
    "react/function-component-definition": [
      "error",
      {
        "namedComponents": "arrow-function",
        "unnamedComponents": "arrow-function"
      }
    ]
  }
}

修改后，你最初的箭头函数写法就能正常通过ESLint检查了：

import type { NextPage } from "next";

const Home: NextPage = () => {
  return (
    <div>Home</div>
  );
};

export default Home;

关于你第二次尝试写法的问题 #

你写的export default function Home<NextPage> ()是错误的——这里的<NextPage>是把NextPage当作泛型参数名，而不是用NextPage类型来注解组件的返回值，这完全不符合TypeScript的类型使用规范，所以才会持续报错。

内容的提问来源于stack exchange，提问作者Idris