Next.js 13 App目录下page.tsx文件重命名方案咨询

1. IDE自定义标签显示（最简单无侵入） #

直接修改IDE的标签显示规则，不用改动任何代码文件，就能让page.tsx在标签栏显示为路由名后缀的形式。以VS Code为例：

• 打开设置（快捷键Ctrl+,），搜索workbench.editor.customLabels.patterns
• 添加自定义规则：

  "workbench.editor.customLabels.patterns": {
    "**/app/**/page.tsx": "${dirname}.page.tsx"
  }
  

这样app/home/page.tsx会在标签栏显示为home.page.tsx，app/blog/[slug]/page.tsx会显示为[slug].page.tsx，完美区分不同页面。

2. 页面代码分离+入口导出 #

保留page.tsx作为Next.js要求的入口文件，实际业务代码写在同目录下的路由命名文件中，再通过page.tsx导出：

• 在对应路由目录创建[路由名].page.tsx，比如app/home/home.page.tsx，编写页面逻辑：

  // home.page.tsx
  export default function HomePage() {
    return <div>Home Page</div>;
  }
  

• 同目录的page.tsx只做导出中转：

  // page.tsx
  export { default } from './home.page.tsx';
  

编辑时直接打开home.page.tsx即可，标签栏会显示文件名，不会混淆，同时完全符合Next.js的App Router约定。

3. 自动同步脚本（保持文件命名习惯） #

如果坚持要编辑[路由名].page.tsx并让Next.js识别，可写一个简单的Node脚本自动同步内容到page.tsx：

• 安装文件监听依赖：npm install chokidar --save-dev
• 创建同步脚本sync-page.js：

  const fs = require('fs');
  const path = require('path');
  const chokidar = require('chokidar');
  
  const appDir = path.join(__dirname, 'app');
  
  function syncPage(filePath) {
    const dir = path.dirname(filePath);
    const targetPath = path.join(dir, 'page.tsx');
    fs.copyFileSync(filePath, targetPath);
  }
  
  // 初始同步所有.page.tsx文件
  function initSync() {
    const traverse = (dir) => {
      fs.readdirSync(dir).forEach(file => {
        const fullPath = path.join(dir, file);
        if (fs.statSync(fullPath).isDirectory()) {
          traverse(fullPath);
        } else if (file.endsWith('.page.tsx') && file !== 'page.tsx') {
          syncPage(fullPath);
        }
      });
    };
    traverse(appDir);
  }
  
  // 监听文件变化同步
  chokidar.watch(`${appDir}/**/*.page.tsx`).on('change', syncPage);
  
  initSync();
  console.log('Page sync service started');
  

• 在package.json添加启动脚本：

  "scripts": {
    "sync:pages": "node sync-page.js"
  }
  

启动脚本后，修改home.page.tsx时会自动同步内容到同目录的page.tsx，不影响Next.js运行，同时满足你的命名习惯。

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