Next.js 13项目中重命名app目录文件触发404问题求助

• 核心规则明确：Next.js 13+ 的 App Router 模式下，每个路由段的页面入口组件必须严格命名为page.tsx（全小写），框架只会识别这个文件名作为路由对应的页面组件。你把默认的page.tsx改成Home.tsx/home.tsx/Information.tsx，本质上是删除了根路由的入口组件，自然会触发404。

• 自定义组件名称的正确做法：如果想把页面逻辑放在自定义名称的组件里（比如Home.tsx），不要直接修改page.tsx的文件名，而是保留app/page.tsx作为路由入口，在其中导入并渲染你的自定义组件：

// app/page.tsx
import Home from './Home';

export default function Page() {
  return <Home />;
}

这样既满足了框架的路由规则，又能使用你想要的组件名称。

• 清理缓存解决异常提示问题：第一次重命名时的修改提示，大概率是框架的路由规则校验触发的。后续没提示可能是缓存干扰，执行以下命令清理Next.js缓存后再操作：

next dev --clear-cache

• 新项目复现验证：你之前创建新项目没复现，是因为没修改默认的app/page.tsx。试着把新项目的app/page.tsx改成home.tsx，再访问根路径，就能看到同样的404，这也能验证路由文件名的硬性规则。

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