Next.js中能否将动态参数插入路由路径并实现全局统一配置？

Next.js 原生 basePath 仅支持静态固定路径，不支持动态参数占位符，因此你将/console/sites/:siteId设为basePath的尝试无法生效。以下是两种可落地的实现方案：

方案1：封装全局路由工具（最推荐，无侵入性） #

统一封装项目内使用的跳转组件和路由方法，自动注入当前路径的siteId参数，无需每次手动拼接。

• 封装自定义路由钩子
  新建hooks/useSiteRouter.js文件：

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

export default function useSiteRouter() {
  const router = useNextRouter();
  const { siteId } = router.query;

  // 封装push方法，自动补全siteId
  const push = (targetPath, options) => {
    const formattedPath = targetPath.startsWith('/') ? targetPath : `/${targetPath}`;
    const fullPath = `/console/sites/${siteId}${formattedPath}`;
    return router.push(fullPath, options);
  };

  // 按需封装replace、prefetch等其他常用方法
  const replace = (targetPath, options) => {
    const formattedPath = targetPath.startsWith('/') ? targetPath : `/${targetPath}`;
    const fullPath = `/console/sites/${siteId}${formattedPath}`;
    return router.replace(fullPath, options);
  };

  return { ...router, push, replace };
}

• 封装自定义Link组件
  新建components/SiteLink.js文件：

import Link from 'next/link';
import { useRouter } from 'next/router';

export default function SiteLink({ href, children, ...restProps }) {
  const { siteId } = useRouter().query;
  const formattedHref = href.startsWith('/') ? href : `/${href}`;
  const fullHref = `/console/sites/${siteId}${formattedHref}`;
  return <Link href={fullHref} {...restProps}>{children}</Link>;
}

后续项目内所有跳转统一使用上述封装的工具即可，比如要跳转到console/sites/[siteId]/settings，直接写push('/settings')或者<SiteLink href="/settings">设置</SiteLink>，参数会自动拼接。

方案2：中间件路径重写（适合存量项目，无需修改现有跳转代码） #

如果不想改动现有项目里的跳转逻辑，可以通过middleware.js做路径自动补全：

import { NextResponse } from 'next/server';

export function middleware(request) {
  const { pathname, cookies } = request;
  // 匹配缺少siteId的console路径
  if (pathname.startsWith('/console/sites/') && !pathname.match(/^\/console\/sites\/[^/]+(\/|$)/)) {
    // 提前将用户当前选中的siteId存在cookie中供中间件读取
    const currentSiteId = cookies.get('currentSiteId')?.value;
    if (currentSiteId) {
      const targetPath = pathname.replace('/console/sites', '');
      return NextResponse.rewrite(new URL(`/console/sites/${currentSiteId}${targetPath}`, request.url));
    }
  }
  return NextResponse.next();
}

export const config = {
  matcher: '/console/sites/:path*',
};

该方案需要提前将用户当前使用的siteId存入cookie，否则中间件无法获取到动态参数值。

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