Next.js 13（App Router）如何避免所有页面都命名为page.tsx？

Next.js 13 App Router的page.tsx和route.ts是约定式路由的核心入口文件名，无法直接替换，但可以通过以下方式优化开发体验，解决标签页混淆的问题：

• 优化VSCode标签页显示
  直接修改VSCode配置，让标签页显示文件的相对路径或文件夹名，避免仅显示page.tsx。在项目根目录的.vscode/settings.json中添加：

  {
    "workbench.editor.labelFormat": "relativeFile"
  }
  

  标签会显示类似app/dashboard/page.tsx的完整相对路径，一眼就能区分不同页面；也可以设置为medium，显示dashboard/page.tsx这种更简洁的格式。

• 拆分页面逻辑到命名文件
  保留page.tsx作为路由入口，但把实际页面逻辑（包括服务器组件的业务代码）写到同目录下的命名组件文件中，仅在page.tsx做导出：

  // app/dashboard/DashboardPage.tsx
  export default function DashboardPage() {
    // 完整的页面逻辑（含服务器端数据处理）
    return <div>用户仪表盘</div>;
  }
  
  // app/dashboard/page.tsx
  export { default } from './DashboardPage';
  

  日常开发直接打开DashboardPage.tsx，标签页显示明确的文件名，无需频繁切换到page.tsx。API路由的route.ts可以用同样方式处理：

  // app/api/users/UsersApi.ts
  export async function GET() {
    const users = await fetchUsers();
    return new Response(JSON.stringify(users));
  }
  
  // app/api/users/route.ts
  export { GET } from './UsersApi';
  

• 利用VSCode内置工具辅助区分
  使用VSCode的「打开编辑器」面板（侧边栏最下方），它会显示所有打开文件的完整路径，切换时更直观；也可以用快捷键Ctrl+Tab（Windows/Linux）或Cmd+Tab（Mac）快速切换，预览窗口会展示文件路径和内容缩略。

• 强化文件夹命名的语义化
  给路由文件夹起更明确的名字，比如app/user-settings、app/order-history，配合标签页显示的文件夹名，能快速识别对应的page.tsx所属页面。

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