使用WordPress无头CMS时如何将内部链接替换为Next.js Link组件

以下是两种可直接落地的实现方案：

方案1：客户端HTML解析替换（最常用） #

使用html-react-parser库解析WordPress返回的HTML内容字符串，匹配原生<a>标签后按需替换为Next.js的Link组件，这是目前使用最广的实现方式。

操作步骤 #

1. 安装依赖

npm install html-react-parser
# 或使用pnpm
pnpm add html-react-parser

2. 编写替换逻辑
   以下为Next.js 13+ App Router版本的代码示例：

import parse from 'html-react-parser';
import Link from 'next/link';

const replaceAnchors = (domNode) => {
  // 仅处理a标签
  if (domNode.name !== 'a') return;

  const href = domNode.attribs.href;
  // 特殊协议、锚点、站外链接保留原生a标签
  if (
    href.startsWith('#') ||
    href.startsWith('mailto:') ||
    href.startsWith('tel:') ||
    (href.startsWith('http') && !href.includes('你的WordPress站点域名'))
  ) {
    // 站外链接新增安全属性
    if (href.startsWith('http') && !href.includes('你的WordPress站点域名')) {
      domNode.attribs.target = '_blank';
      domNode.attribs.rel = 'noopener noreferrer';
    }
    return domNode;
  }

  // 提取站内链接相对路径
  const internalPath = href.replace('https://你的WordPress站点域名', '');
  // 替换为Link组件
  return <Link href={internalPath} {...domNode.attribs}>
    {domNode.children.map(child => parse(child))}
  </Link>;
};

// 文章内容渲染组件
export default function PostBody({ wpContent }) {
  return <div className="post-content">
    {parse(wpContent, { replace: replaceAnchors })}
  </div>;
}

如果使用Next.js 12及更早的Pages Router版本，只需调整Link组件的返回逻辑即可：

return <Link href={internalPath}>
  <a {...domNode.attribs}>
    {domNode.children.map(child => parse(child))}
  </a>
</Link>;

方案2：WordPress端预处理（可选优化） #

如果不想在前端做过多域名匹配逻辑，可以在WordPress端提前把站内链接转换为相对路径，减少前端计算量。
将以下代码添加到WordPress主题的functions.php文件中即可：

add_filter('the_content', function ($content) {
  $siteUrl = get_site_url();
  // 把站内绝对路径替换为相对路径
  return str_replace('href="' . $siteUrl, 'href="', $content);
});

注意事项 #

• 不要替换锚点、mailto、tel等特殊协议的链接，保留原生a标签即可保证功能正常
• 站外链接无需使用Link组件，原生a标签的整页跳转符合用户对外部链接的使用预期
• 所有站外链接建议统一添加target="_blank"和rel="noopener noreferrer"属性，避免安全风险

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