在子路径应用中配置Next.js Link组件完整路径的方法

针对你在Turbo+Next.js monorepo里遇到的共享UI组件中Link自动添加当前应用子路径的问题，不需要被迫使用会重载页面的<a>标签，有几种更优雅的客户端导航方案：

1. 使用带域名的绝对路径（推荐） #

通过环境变量动态拼接目标域名和路径，让Next.js的Link识别这是跨应用的绝对路径，避免自动添加当前应用的basePath：

import Link from 'next/link';

export const SignoutLink = () => {
  // 在各应用的.env文件中配置NEXT_PUBLIC_APP_DOMAIN（比如http://localhost:3000）
  const signoutUrl = `${process.env.NEXT_PUBLIC_APP_DOMAIN}/accounts/auth/signout`;
  return <Link href={signoutUrl}>退出登录</Link>;
};

这种方式保持了Link的客户端导航特性，不会触发页面重载。

2. 手动调用Router的push方法并禁用basePath #

利用next/router的push方法，通过配置项跳过当前应用的basePath自动拼接：

import { useRouter } from 'next/router';

export const SignoutLink = () => {
  const router = useRouter();

  const handleSignoutNavigate = () => {
    // 第三个参数设置basePath: false，绕过当前应用的前缀
    router.push('/accounts/auth/signout', undefined, { basePath: false });
  };

  return (
    <span onClick={handleSignoutNavigate} style={{ cursor: 'pointer' }}>
      退出登录
    </span>
  );
};

这种方式同样是客户端导航，且不需要硬编码域名，适合同域名下的跨应用跳转场景。

3. 特殊场景下使用标签 #

如果你的跨应用跳转涉及不同域名，或者完全不需要客户端导航的特性，再考虑使用标准<a>标签：

<a href="/accounts/auth/signout">退出登录</a>

这种方式会触发页面重载，仅作为备选方案。

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