Next.js从Pages路由迁移到App路由时page.js无法渲染，显示not-found.js

以下是排查和解决该问题的几个关键方向：

• 检查page.js的命名与导出规则
  确保文件名是page.js（或page.tsx），Next.js对文件名大小写敏感，比如Page.js会被识别为无效路由文件；同时必须使用默认导出组件，不能用命名导出：

  // 正确写法
  export default function Home() {
    return <div>首页内容</div>
  }
  

• 排查page.js的渲染错误
  如果page.js存在语法错误、组件渲染报错（比如未处理的异步逻辑、缺失依赖），Next.js会自动 fallback 到not-found.js。打开浏览器控制台查看是否有未捕获的报错信息，定位具体问题。

• 清理缓存并重启服务
  执行next dev --clean命令清理Next.js缓存后重启开发服务器，旧缓存可能导致路由识别异常，引发页面渲染错误。

• 确认RootLayout的正确性
  RootLayout必须正确接收并渲染children属性，否则子组件（包括page.js）无法显示：

  export default function RootLayout({ children }) {
    console.log('RootLayout渲染');
    return (
      <html lang="zh-CN">
        <body>{children}</body>
      </html>
    )
  }
  

  同时检查RootLayout中是否有条件渲染逻辑意外隐藏了children，比如{someCondition && children}需确保条件为true时才会渲染子内容。

• 检查目录结构与路由规则
  确认app目录下没有嵌套的非法路由目录或文件干扰根路由，同时检查next.config.js中是否有自定义rewrites、redirects规则影响了根路由的正常渲染。

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