如何在NextJS中实现动态basePath 动态路由前缀配置最佳实践咨询

针对需要动态拼接groupID作为URL前缀、且basePath无法满足动态修改需求的场景，以下为优先级从高到低的实现方案： #

1. 首选：封装自定义Link组件+自定义路由钩子 #

该方案侵入性低、可维护性强，适合路由量大的项目：

步骤1：封装全局统一的CustomLink组件 #

创建components/CustomLink.tsx，自动完成路径前缀拼接，兼容NextJS原生Link的所有参数：

import { useRouter } from 'next/router';
import Link, { LinkProps } from 'next/link';
import { PropsWithChildren } from 'react';

const CustomLink = ({ href, ...rest }: PropsWithChildren<LinkProps>) => {
  const { query } = useRouter();
  const groupID = query.groupID as string;

  // 统一处理href逻辑
  const getProcessedHref = () => {
    // 外部链接直接返回不处理
    if (typeof href === 'string' && /^https?:\/\//.test(href)) return href;
    // 兼容NextJS路由对象格式
    if (typeof href === 'object') {
      return {
        ...href,
        pathname: `/${groupID}${href.pathname}`
      };
    }
    // 普通内部路径拼接前缀
    const normalizedPath = href.startsWith('/') ? href : `/${href}`;
    return `/${groupID}${normalizedPath}`;
  };

  return <Link href={getProcessedHref()} {...rest} />;
};

export default CustomLink;

步骤2：全局替换导入 #

项目中所有导入next/link的地方统一替换为自定义的CustomLink，原有路径写法无需改动，例如原来的<Link href="/tasks" />会自动拼接为/${groupID}/tasks。

步骤3：封装自定义路由钩子（可选） #

如果项目中存在大量router.push等编程式导航调用，可同步封装自定义useRouter钩子，统一处理路径拼接：

import { useRouter as useNextRouter } from 'next/router';

const useRouter = () => {
  const router = useNextRouter();
  const originalPush = router.push;
  const groupID = router.query.groupID as string;

  const push = async (href: string, as?: string, options?: any) => {
    const processedHref = /^https?:\/\//.test(href) ? href :
      `/${groupID}${href.startsWith('/') ? href : `/${href}`}`;
    return originalPush(processedHref, as, options);
  };

  return {
    ...router,
    push,
    // 可按需封装replace、prefetch等方法
  };
};

export default useRouter;

2. 备选：中间件路径重写 #

如果需要零侵入修改现有业务代码，可使用NextJS中间件在请求层做路径映射，将/[groupID]/xxx格式的请求重写到实际对应的路由文件，groupID可通过header或query传递给业务层。该方案无需修改任何业务层的路由写法，仅需在中间件中配置排除静态资源、API路由等无需添加前缀的路径即可。 #

不推荐方案 #

手动逐个拼接groupID到Link的href属性中，该方案维护成本极高，极易出现漏改、错改问题，不适合路由量较大的项目。

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