next/link自动将href转为绝对路径，如何保留相对路径？

问题场景 #

使用next/link编写的代码：

<Link href="/examples/fetch-rest-data" >
     <a>SWR</a>
</Link>

生成的HTML中a标签href为带域名的绝对路径：

<li>
    <a href="https://localhost/examples/fetch-rest-data">SWR</a>
</li>

需求是生成根相对路径的HTML：

<li>
    <a href="/examples/fetch-rest-data">SWR</a>
</li>

解决方案 #

1. 生产构建默认行为 #

Next.js在生产构建（npm run build）后，next/link会自动输出根相对路径的href，无需额外配置。开发环境下的绝对路径是框架为支持热更新等特性的默认行为，不影响生产使用。

2. 强制开发环境输出相对路径 #

如果需要在开发环境也得到根相对路径，可在项目根目录的next.config.js中添加以下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: '', // 根路径部署时保持为空，子路径部署需填写对应路径
  experimental: {
    relativeLinks: true,
  },
}

module.exports = nextConfig

3. App Router（Next.js 13+）适配 #

如果使用App Router，next/link无需嵌套<a>标签，直接编写：

<Link href="/examples/fetch-rest-data">SWR</Link>

该写法在生产和开发环境（配置上述参数后）都会生成根相对路径的href。

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