Next.js中根路由被app/page.tsx占用时，如何访问pages/index.tsx？

• 修改Pages Router文件路径：直接把pages/index.tsx重命名为pages/[自定义名称].tsx（比如pages/legacy-home.tsx），之后就能通过localhost:3000/legacy-home访问该组件。这是最简单直接的方式，符合Pages Router的路由映射规则——文件路径对应访问路由。

• 在App Router中创建转发路由：如果不想修改原文件名，可以在App Router下新建一个路由目录（比如app/legacy/page.tsx），通过动态导入的方式渲染pages/index.tsx的内容。代码示例：

// app/legacy/page.tsx
import dynamic from 'next/dynamic';

// 动态导入Pages Router的组件，禁用SSR避免冲突
const LegacyRoot = dynamic(() => import('../../../pages/index'), { ssr: false });

export default function LegacyPage() {
  return <LegacyRoot />;
}

完成后访问localhost:3000/legacy就能看到原pages/index.tsx的内容。

注意：Next.js中App Router的路由优先级高于Pages Router，所以根路由/会被app/page.tsx独占，无法直接让pages/index.tsx作为根路由访问，除非删除app/page.tsx文件。

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