Next.js非首页路由报错：TypeError: Object(...) is not a function

这种情况我开发Next.js项目时也碰到过，大概率是导入导出语法或者组件使用方式出了问题，给你几个具体的排查和解决方向：

1. 核对Dashboard组件的导入/导出方式 #

这是最常见的原因！你要先确认Dashboard组件的导出类型，再检查各个页面的导入语法是否匹配：

• 如果Dashboard组件是默认导出（比如组件文件里写的是export default function Dashboard() {}），那所有页面都必须用默认导入：import Dashboard from '../components/Dashboard'，不能加花括号{}；
• 如果是命名导出（export function Dashboard() {}），那导入时必须带花括号：import { Dashboard } from '../components/Dashboard'。

很可能你的/index页面碰巧用对了导入方式，但/item和/add-item页面用错了，导致导入的不是一个函数对象，触发报错。

2. 检查页面的组件导入路径 #

仔细核对/item和/add-item页面中导入Dashboard的路径是否正确：

• 比如/index页面的路径是../components/Dashboard，但/item页面可能因为层级不同，需要写成../../components/Dashboard（如果item在pages/item目录下），路径写错会导致导入到错误的模块，甚至是一个空对象。
• 推荐配置Next.js的绝对导入来避免路径错误：在项目根目录创建jsconfig.json（JS项目）或tsconfig.json（TS项目），添加如下配置：

  {
    "compilerOptions": {
      "baseUrl": "."
    }
  }
  

  之后所有页面都可以统一用import Dashboard from 'components/Dashboard'导入，不用再纠结层级问题。

3. 排查Dashboard组件内部的代码问题 #

如果前面两步都没问题，那可能是Dashboard组件本身的代码有问题：

• 检查Dashboard里是否导入了其他模块，且用错了导入方式（比如第三方库是默认导出，你却用了命名导入）；
• 可以先把Dashboard简化成最基础的结构测试：

  export default function Dashboard({ children }) {
    return <div className="dashboard-layout">{children}</div>
  }
  

  再访问/item页面，如果不报错了，就说明是Dashboard内部的逻辑或导入有问题，逐步恢复代码排查即可。

4. 清理Next.js缓存并重新构建 #

有时候Next.js的缓存会残留旧的编译代码，导致修改导入导出后依然报错：

• 删除项目中的.next文件夹（就是你报错信息里的src/.next目录）；
• 重启开发服务器（停止npm run dev后重新启动）；
• 生产环境可以执行npm run build重新构建，确保缓存被清理。

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