Next.js App目录中MDX与Link组件相对链接失效问题

问题原因 #

Next.js 13的<Link>组件解析相对路径时，基准是组件所在的文件路径，而非当前页面的路由路径。当你在mdx-components.tsx中直接用<Link>替换MDX默认的<a>标签时，./plain-markdown这类相对链接会以mdx-components.tsx的位置为基准解析，而非app/blog/test/page.mdx的路由路径，最终导致跳转路径从预期的/blog/plain-markdown变成/plain-markdown（即http://localhost:3001/test）。

另外要注意：Next.js 13的<Link>组件会直接渲染为<a>标签，无需嵌套额外的<a>子元素，这是官方明确的行为变更。

解决方案 #

在自定义链接组件中，结合当前页面的路由路径来修正相对链接的解析基准：

1. 在mdx-components.tsx中引入必要的钩子和组件：

import { usePathname } from 'next/navigation';
import Link from 'next/link';

2. 实现自定义链接组件，处理相对路径：

function CustomLink({ href, ...props }) {
  const pathname = usePathname();
  let resolvedHref = href;

  // 处理以./开头的相对路径
  if (href.startsWith('./')) {
    // 获取当前路由路径的父级路径（如从/blog/test提取/blog）
    const parentRoute = pathname.substring(0, pathname.lastIndexOf('/'));
    // 拼接成正确的绝对路径
    resolvedHref = `${parentRoute}/${href.slice(2)}`;
  }

  return <Link href={resolvedHref} {...props} />;
}

3. 在MDX组件映射中替换默认<a>：

export function useMDXComponents(components) {
  return {
    ...components,
    a: CustomLink,
  };
}

验证效果 #

修改后，MDX中的[next page](./plain-markdown)会被正确解析为/blog/plain-markdown，点击后将跳转到预期的页面，DOM中的<a>标签href属性也会显示正确的绝对路径。

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