Next.js 13自定义404页面不显示内容求助

可能的原因及对应解决方案： #

1. Layout组件未正确接收/传递children

你提供的layout代码片段缺少完整的组件定义和children参数接收逻辑，这会导致not-found组件的内容无法被插入到页面结构中。完整的RootLayout应该是这样：

import type { ReactNode } from 'react';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <>
      <main className="px-10 py-5">
        {children}
      </main>
    </>
  );
}

虽然你的useEffect能正常执行（说明组件已被实例化），但如果layout没正确传递children，组件内容就无法渲染到DOM里。

2. 样式导致内容不可见

检查全局样式或layout中main的样式设置：

• 临时移除main的className="px-10 py-5"，简化为<main>{children}</main>测试，排除内边距导致内容超出视口的可能。
• 排查全局样式是否设置了body { overflow: hidden; }，或者文本颜色与背景色一致，导致内容肉眼不可见。

3. Next.js缓存或构建问题

• 执行npm run build && npm run start进行生产构建测试，排除开发环境缓存干扰。
• 开发环境下按Ctrl+Shift+R强制刷新页面，清除浏览器缓存。

4. not-found.tsx位置错误

全局404页面必须放在app/根目录下（而非子路由目录），确保路由未匹配时能触发全局的not-found组件。如果是子路由专属的404，才需要放在对应路由段的目录中。

验证步骤： #

1. 先修复layout组件，确保正确接收并传递children。
2. 简化layout结构，移除可能影响显示的样式。
3. 强制刷新或重新构建项目，查看内容是否正常显示。

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