Next.js通过GraphQL获取WordPress文章时遇Invalid <Link>嵌套<a>错误求助

错误原因 #

Next.js App Router中的新版<Link>组件内部已自动生成<a>标签，若手动在<Link>中嵌套自定义<a>标签，会造成标签嵌套冲突，触发该错误。你使用的cms-wordpress示例基于App Router，因此必须遵循新版Link的使用规则。

解决方案 #

1. 修正静态代码中的Link嵌套 #

找到代码中所有<Link>包裹<a>的位置，直接移除内部<a>，并将原<a>的属性（如className、title）迁移到<Link>组件上：

错误写法：

<Link href={`/posts/${post.slug}`}>
  <a className="post-title">{post.title}</a>
</Link>

正确写法：

<Link href={`/posts/${post.slug}`} className="post-title">
  {post.title}
</Link>

2. 处理WordPress GraphQL返回的富文本链接 #

若错误来自WordPress接口返回的富文本内容（含<a>标签），需对富文本进行转换：

• 使用react-html-parser等工具解析HTML，将原生<a>标签替换为Next.js的<Link>组件
• 确保富文本中的<a>未被包裹在<Link>组件内，避免嵌套冲突

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