NextJS中next dev运行正常但build失败，误将普通函数识别为React Hooks

这个报错是ESLint的react-hooks/rules-of-hooks校验规则触发导致的。Next.js构建阶段默认会开启ESLint全量校验，而dev模式下校验规则宽松很多，所以才会出现dev正常运行、build失败的差异。

核心触发逻辑是：React的Hook规则校验默认会把所有名称以use开头的函数识别为自定义React Hook，和函数实际逻辑无关。你定义的异步函数名字为useFunction，刚好命中了这个命名识别规则，ESLint就将它按照Hook的规则校验，自然就会报「Hook不能在回调函数里调用」的错误。

• 方案1（推荐）：修改普通函数的命名，不要以use开头，比如改成handleFunctionCall、fetchResult之类符合普通函数命名习惯的名称即可，修改后代码示例：

// 调整函数命名，避免触发Hook识别规则
const fetchResult = async () => {
  const result = await someStuff();
  return result
}

const FunctionButton = () => {
  return <Button onClick={() => fetchResult()}>Click Me</Button>;
};

export default FunctionButton;

• 方案2（不推荐）：如果确实不想修改函数名，可以临时给对应行加ESLint忽略注释，但是会破坏Hook规则的正常校验逻辑，不建议常规使用，示例：

const FunctionButton = () => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  return <Button onClick={() => useFunction()}>Click Me</Button>;
};

作为React新手建议遵守社区通用命名规范：所有自定义Hook统一用use开头命名，普通业务函数、事件处理函数不要用use开头，既可以避免这类校验报错，也能提升代码可读性。

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