使用Nextjs遇警告：匿名函数默认导出异常，为何需命名函数？

这个警告本质是Next.js（配合内置ESLint规则）对组件导出的规范约束，核心目的是提升代码可维护性和调试效率，具体原因如下：

• 调试定位更高效：匿名函数在报错堆栈里只会显示anonymous，一旦组件出问题，你没法直接从报错信息里锁定对应组件。给函数命名后，报错栈会直接显示组件名称，能快速定位到问题代码。

• React DevTools 识别更清晰：React开发者工具里，匿名函数组件会显示成Unknown或Anonymous，在复杂组件层级里根本分不清各个组件的身份。命名后，DevTools会直接显示组件名，调试组件结构、状态时一目了然。

• ESLint 规则的强制约束：Next.js默认启用的ESLint规则（比如react/function-component-definition）要求函数组件必须有明确名称，这是团队协作的统一规范——清晰的命名能避免代码混乱，让所有人都能快速理解组件功能。

• 辅助打包优化：命名函数能帮助打包工具更准确地识别未使用的组件，提升Tree Shaking的效果，减少最终打包体积，这是规范带来的额外收益。

解决示例 #

把匿名函数默认导出改成命名函数即可：

错误写法：

export default () => {
  return <div>Hello World</div>;
};

正确写法（二选一）：

// 直接命名导出
export default function HomePage() {
  return <div>Hello World</div>;
}

// 先定义再导出
const HomePage = () => {
  return <div>Hello World</div>;
};
export default HomePage;

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