Next.js修改_app.tsx/_app.jsx不生效，自定义pageExtensions设置问题

问题详情 #

当前pages/_app.tsx代码如下：

import type { AppProps } from "next/app";
import Head from "next/head";

import { MantineProvider } from "@mantine/core";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title>My title</title>
        <meta name="description" content="My description" />
        <link rel="icon" href="/favicon.png" />
      </Head>
      <MantineProvider
        withGlobalStyles
        withNormalizeCSS
      >
        <Component {...pageProps} />
      </MantineProvider>
    </>
  );
}

运行npm run dev初始正常，但修改该文件后，变更无法同步到应用；即使写入语法错误，应用仍加载旧版本代码。执行生产构建后问题依旧。

解决步骤 #

• 清理构建缓存
  停止开发服务器，手动删除项目根目录下的.next文件夹，以及node_modules/.cache目录，之后重新启动npm run dev
• 核对文件路径
  确认修改的是项目实际使用的_app.tsx文件：如果项目配置了src目录，对应文件应为src/pages/_app.tsx，反之则是根目录下的pages/_app.tsx，避免误改了错误路径下的同名文件
• 检查Next.js配置
  打开next.config.js，排查是否有自定义webpack规则意外排除了_app.tsx的监听或编译，比如在module.rules中添加了忽略该文件的配置
• 排查缓存类依赖
  如果项目使用了第三方缓存插件，暂时移除或禁用相关配置，测试是否恢复热更新
• 重启开发进程
  完全关闭运行开发服务器的终端窗口，避免进程残留，之后重新启动npm run dev

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