Next.js自定义_app.tsx组件被完全绕过问题求助

1. 确认文件位置是否合规 #

Next.js 12.x 版本对自定义 _app.tsx 的位置有严格要求：

• 项目根目录下的 pages 文件夹内，即 ./pages/_app.tsx
• 如果用了 src 目录结构，必须放在 ./src/pages/_app.tsx
  要是文件放错了地方（比如丢在 components 或其他目录），Next.js 会直接忽略它，使用默认的 App 组件。

2. 检查组件导出是否正确 #

你的代码里已经默认导出了 MyApp，这没问题，但要注意不能同时存在多个默认导出，也别用命名导出替代默认导出——Next.js 只会识别默认导出的 App 组件。

3. 清除缓存重启服务 #

Next.js 的缓存有时候会导致新修改的 _app 组件未加载：

• 关掉当前的 next dev 进程
• 删除项目根目录下的 .next 文件夹
• 重新运行 npm run dev

4. 排查全局样式导入问题 #

如果全局样式也没生效，要确保你是在 _app.tsx 里正确导入的：

import type { AppProps } from "next/app";
import { Fragment } from "react";
import "@styles/globals.scss"; // 对应你 tsconfig 里的路径配置

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Fragment>
      <div>Hello world</div>
      <Component {...pageProps} />
    </Fragment>
  );
}

另外要确认样式文件的实际位置和 tsconfig.json 里的 paths 匹配，比如 @styles/* 指向 src/common/styles/*，那全局样式就得放在 src/common/styles/ 目录下。

5. 用最简页面测试 #

建个极简的测试页面 pages/index.tsx：

export default function Home() {
  return <h1>测试首页</h1>;
}

启动服务后访问 localhost:3000，如果看不到页面顶部的 Hello world，那基本可以确定是文件位置的问题，再回去核对路径。

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