Next.js中_app.tsx的正确放置及AuthProvider报错排查

核心错误：混淆Next.js的两种路由系统 #

你当前使用的是App Router（项目包含app/目录），但_app.tsx是Pages Router（基于pages/目录）的全局自定义组件，App Router完全不识别_app.tsx文件——这意味着你之前无论怎么放置_app.tsx，它都不会被执行，直接导致AuthProvider从未挂载，useAuth钩子找不到上下文，抛出报错。

正确的全局布局实现（App Router） #

在App Router中，全局行为定制需要使用根布局文件app/layout.tsx，它会自动包裹所有app/目录下的页面组件。

步骤1：移除无效的_app.tsx #

彻底删除你之前创建的所有_app.tsx文件，避免路由系统混淆。

步骤2：创建/修改app/layout.tsx #

将原_app.tsx中的全局包裹逻辑迁移到根布局中，示例代码如下：

import React from 'react';
import { NextUIProvider } from '@nextui-org/react';
import { AuthProvider } from '@/context/AuthProvider';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        <NextUIProvider>
          <AuthProvider>
            {/* 在这里添加全局导航组件 */}
            {children}
            {/* 在这里添加全局页脚组件 */}
          </AuthProvider>
        </NextUIProvider>
      </body>
    </html>
  );
}

步骤3：确认目录结构正确性 #

你的项目目录应符合以下规范：

项目根目录
├── app/
│   ├── layout.tsx       # 全局根布局
│   ├── signup/
│   │   └── page.tsx     # 注册页面
│   └── ...其他页面/组件
├── context/
│   └── AuthProvider.tsx # 认证上下文组件
└── package.json等配置文件

报错根源说明 #

• App Router不会读取任何_app.tsx文件，因此你之前的AuthProvider从未被渲染，useAuth自然找不到上下文。
• 根布局layout.tsx是App Router的强制全局入口，所有页面都会被它包裹，确保AuthProvider在所有使用useAuth的组件上层。

验证修复 #

完成上述修改后，重启Next.js开发服务器，signup/page.tsx中的useAuth即可正确找到AuthProvider的上下文，报错会消失。

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