Next.js 13.5.4创建路由时出现默认导出非React组件运行时错误

报错信息 #

未处理的运行时错误
错误：页面"/dashboard"的默认导出不是React组件

调用栈
ew
/Users/mac/Documents/nextjs/rico_sub/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (13:19957)
async
/Users/mac/Documents/nextjs/rico_sub/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (13:20643)
async ew
/Users/mac/Documents/nextjs/rico_sub/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (13:20409)
async
/Users/mac/Documents/nextjs/rico_sub/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (13:20643)
async ew
/Users/mac/Documents/nextjs/rico_sub/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (13:20409)
async O
/Users/mac/Documents/nextjs/rico_sub/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (13:25264)

排查与解决方法 #

• 检查默认导出规则
  确保app/dashboard/page.tsx中的组件是默认导出，而非命名导出。正确示例：

export default function Dashboard() {
  return <div>仪表盘页面</div>;
}

避免错误的命名导出写法：

// 错误：Next.js不会将命名导出识别为页面组件
export function Dashboard() {
  return <div>仪表盘页面</div>;
}

• 确认组件类型有效性
  组件必须是返回JSX的函数，不能是字符串、对象等非函数类型。比如不要出现：

// 错误：导出内容不是React组件
export default "Dashboard Page";

若使用异步组件，确保是React Server Component；如果是客户端组件，需用Suspense包裹异步逻辑。

• 校验文件路径与命名
  确认页面文件严格命名为page.tsx（或.jsx），且位于app/dashboard/目录下。注意文件名大小写（Linux环境区分大小写），避免拼写错误。

• 检查客户端组件指令
  如果是客户端组件，'use client'指令必须是文件第一行有效代码（不能有前置注释或空行）：

'use client';

export default function Dashboard() {
  return <div>客户端仪表盘页面</div>;
}

• 清除缓存并重启服务
  执行以下命令清除Next.js缓存后重启开发服务器：

rm -rf .next
npm run dev

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