Next.js如何通过单行导出语句避免默认导出重复？

这个问题我之前也碰到过，核心原因是export * from './Header'只会导出目标文件里的命名导出，但你的Header.jsx用的是默认导出，所以这种写法并不会把默认导出来带进来，这就导致你从../components/header导入默认导出时出错。

给你两种简洁的单行解决方案：

方案1：将默认导出转为命名导出（推荐） #

在header/index.js里写：

export { default as Header } from './Header'

这种写法的好处是兼容性更强——既支持默认导入：

import Header from '../components/header'

也支持命名导入：

import { Header } from '../components/header'

完全适配不同的导入习惯，也符合组件导出的常见规范。

方案2：直接导出默认导出 #

如果你只需要支持默认导入，也可以用更简洁的写法：

export { default } from './Header'

这样写之后，你就能直接用import Header from '../components/header'来导入，和你之前写import Header from './Header'; export default Header的效果完全一致，但只需要一行代码。

这两种都是ES模块的标准语法，Next.js完全支持，不用担心兼容性问题。

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