Next.js自定义路由方案咨询：替代字符串路径的路由管理方法

完全可以实现你想要的自定义路由配置方案，不用每次修改页面文件名都手动更新所有跳转代码，核心思路是自己维护一个统一的路由映射文件，让所有<Link>组件都引用这个文件里的路径常量，具体步骤如下：

• 第一步：创建路由配置文件
  在项目里新建一个配置文件（比如src/config/routes.ts），把所有页面的路径和对应页面文件映射写在这里：

// src/config/routes.ts
export const routes = {
  dashboard: {
    path: '/dashboard',
    page: 'dashboard'
  },
  userProfile: {
    path: '/users/profile',
    page: 'users/profile'
  },
  orderDetail: {
    path: '/orders/[id]',
    page: 'orders/[id]'
  }
};

• 第二步：在组件中引用配置的路径
  所有需要跳转的地方，都从这个配置文件里取路径，不用硬写字符串：

import Link from 'next/link';
import { routes } from '@/config/routes';

// 普通跳转
<Link href={routes.dashboard.path}>仪表盘</Link>

// 动态路由跳转（比如带id的订单详情）
<Link href={routes.orderDetail.path.replace('[id]', '123')}>订单123详情</Link>

• 进阶优化：自动生成路由配置
  如果页面很多，手动写配置麻烦，可以写个简单的Node脚本，遍历pages（或app）目录的文件结构，自动生成这个路由配置文件，这样页面文件名修改后，跑脚本就能同步更新路由映射，进一步减少手动操作。

需要注意的是，Next.js的文件系统路由是底层基础，但你完全可以在它之上封装一层自己的路由配置层，既利用Next.js路由的原生能力，又解决了硬编码路径维护麻烦的问题，非常适合内部导航复杂的应用。

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