Next.js 的页面文件都是 page.tsx，api 都是 router.ts，我找文件费老大劲了还很容易找错，这个有没有什么解决办法？

我对 Next.js 很不习惯的一点，是他的页面文件都是 page.tsx，api 都是 router.ts。我找文件费老大劲了还很容易找错 …… 这个有没有什么解决办法？

为了更好地管理和区分 Next.js 项目中的页面和 API 路由文件，可以尝试以下方法：

在文件名中添加明确的前缀或后缀，使其更易识别。

例如：

将页面和 API 路由文件分别放在单独的子目录中，以便更容易区分和管理。

例如：

/pages
  /index.tsx
  /about.tsx
/api
  /user.ts
  /post.ts

在 Next.js 中，你可以在 pages 目录下创建 api 目录，将 API 路由文件放在里面，这样可以避免混淆。

在 tsconfig.json 中配置路径别名，使导入路径更简洁，同时帮助识别文件位置。

例如：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@pages/*": ["pages/*"],
      "@api/*": ["pages/api/*"]
    }
  }
}

然后在代码中这样导入：

import Home from '@pages/home';
import UserAPI from '@api/user';

利用编辑器或 IDE 的插件和功能提高效率。例如，使用 VSCode 的文件夹图标插件，不同类型的文件夹会有不同的图标，帮助快速识别。

虽然 Next.js 有默认的文件结构，但你可以根据需要自定义项目结构，只要配置正确即可。例如，黑哥的梦呓可以将页面和 API 文件分开管理，只需要在 next.config.js 中进行相应的配置。

/src
  /pages
    /index.page.tsx
    /about.page.tsx
  /api
    /user.api.ts
    /post.api.ts
/next.config.js
/tsconfig.json

通过上述方法，可以有效地提高文件管理效率，减少寻找文件的时间和错误的可能性。如果有更多具体需求，也可以继续探讨。