Next12迁移Next13时/app目录出现app router未挂载错误求助

错误核心 #

这个报错本质是App Router没有正确完成挂载，大概率是代码里混用了Pages Router和App Router的路由/导航API，或者根布局文件不符合App Router的要求。

排查修复步骤 #

• 替换导航API：
  检查你的navigation.js代码，要是用的是next/router里的useRouter等钩子，赶紧换成App Router专属的next/navigation。比如：
  错误写法：

  import { useRouter } from 'next/router'
  

  正确写法：

  import { useRouter } from 'next/navigation'
  

  App Router不认Pages Router的导航工具，混用直接触发挂载失败。

• 校验根布局（layout.jsx）结构：
  App Router要求根布局必须满足几个硬性条件：

  1. 必须导出一个React组件，接收children参数
  2. 组件里必须渲染children，且要包裹在<html>和<body>标签里
     举个正确的示例：

  export default function RootLayout({ children }) {
    return (
      <html lang="zh-CN">
        <body>{children}</body>
      </html>
    )
  }
  

  要是你的layout.jsx没渲染children，或者嵌套结构错了，App Router根本挂不起来。

• 排查路由冲突：
  别同时在app和pages目录下放同路径的页面，比如app/about/page.jsx和pages/about.js共存会让路由逻辑混乱，直接触发挂载报错，删掉其中一个就行。

• 清缓存重启服务：
  执行命令删掉缓存文件再重启开发服务，旧缓存可能导致App Router初始化异常：

  rm -rf .next
  npm run dev
  

• 升级Next.js到稳定版：
  早期Next.js 13的App Routerbug很多，建议升级到13.4及以上的稳定版本：

  npm install next@latest react@latest react-dom@latest
  

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