如何从GraphQL富文本中提取链接并在Next.js中正常渲染显示

现有代码存在3个核心问题导致链接无法渲染：

1. 链接处理逻辑定义后未实际生效，modifiedLink变量没有被返回使用
2. Next.js的Link组件缺少必填的href属性，无法正常跳转
3. 没有区分内部链接和外部链接的渲染逻辑，也未处理格式叠加场景（比如同时是粗体的链接）

1. 确认GraphQL查询字段 #

首先保证你的富文本查询已经包含了链接的url字段，参考查询结构示例：

query getPost($slug: String!) {
  post(where: {slug: $slug}) {
    title
    content {
      raw
      # 确保请求到link的url属性，不同CMS字段名可能有差异
      links {
        url
        text
      }
    }
    # 其余原有字段省略
  }
}

2. 修改getContentFragment函数逻辑 #

替换原有函数的逻辑即可，调整后的完整代码如下：

const getContentFragment = (index, text, obj, type) => {
  let modifiedText = text;
  if (obj) {
    // 优先处理文字基础格式（粗体/斜体/下划线），避免嵌套异常
    if (obj.bold) {
      modifiedText = <b key={index}>{modifiedText}</b>;
    }
    if (obj.italic) {
      modifiedText = <em key={index}>{modifiedText}</em>;
    }
    if (obj.underline) {
      modifiedText = <u key={index}>{modifiedText}</u>;
    }
    // 最后处理链接逻辑
    if (obj.link) {
      const linkUrl = obj.link.url;
      // 外部链接用原生a标签打开新页，内部链接用Next.js Link组件走前端路由
      if (linkUrl.startsWith('http') || linkUrl.startsWith('//')) {
        modifiedText = (
          <a 
            key={index} 
            href={linkUrl} 
            target="_blank" 
            rel="noopener noreferrer"
          >
            {modifiedText}
          </a>
        );
      } else {
        modifiedText = (
          <Link key={index} href={linkUrl}>
            {modifiedText}
          </Link>
        );
      }
    }
  }

  switch (type) {
    case "heading-three":
      return (
        <h3 key={index}>
          {Array.isArray(modifiedText) ? modifiedText.map((item, i) => (
            <React.Fragment key={i}>{item}</React.Fragment>
          )) : modifiedText}
        </h3>
      );
    case "paragraph":
      return (
        <p key={index}>
          {Array.isArray(modifiedText) ? modifiedText.map((item, i) => (
            <React.Fragment key={i}>{item}</React.Fragment>
          )) : modifiedText}
        </p>
      );
    case "heading-four":
      return (
        <h4 key={index}>
          {Array.isArray(modifiedText) ? modifiedText.map((item, i) => (
            <React.Fragment key={i}>{item}</React.Fragment>
          )) : modifiedText}
        </h4>
      );
    default:
      return modifiedText;
  }
};

3. 版本兼容调整 #

如果你使用的是Next.js 12及更早版本，需要在Link组件内部嵌套一层a标签：

<Link key={index} href={linkUrl}>
  <a>{modifiedText}</a>
</Link>

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