Next.js中无onclick事件的Button嵌套Link组件是否合规？

在Next.js里将<button>嵌套进<Link>组件确实能正常运行，你没遇到 hydration 错误也属正常，但这不是官方推荐的最佳实践，存在以下潜在问题：

• 语义化与无障碍问题：<Link>最终渲染为<a>标签（导航链接），而<button>是交互按钮，嵌套会导致DOM语义混乱。屏幕阅读器等辅助技术可能无法正确识别元素的核心用途，损害无障碍访问体验。
• 事件与行为冲突：虽然Next.js的<Link>会拦截点击事件实现客户端导航，但<button>本身有默认行为（比如type="submit"时触发表单提交）。后续若给按钮添加表单相关属性或事件逻辑，可能触发意外行为，或导致导航与按钮原有事件的冲突。
• 样式与交互不一致：浏览器对<a>和<button>的默认样式、交互状态（如:focus、:active）处理不同，嵌套后需要额外覆盖样式来统一外观，增加维护成本。另外，右键点击<a>的菜单（如“在新标签页打开”）与右键点击<button>的菜单行为差异明显，会造成用户体验不一致。

推荐的替代方案 #

方案1：将按钮样式直接应用到<Link> #

让<Link>本身呈现按钮外观，既保持导航的语义性，又实现按钮的视觉效果：

<Link 
  href={data.buttonUrl}
  target={data.isButtonUrlExternal ? '_blank' : '_self'}
  rel={data.isButtonUrlExternal ? 'noopener' : ''}
  className={classNames(
    'text-sm !px-5 max-w-fit uppercase',
    getButtonStyle(buttonStyle),
    'cursor-pointer' // 确保鼠标指针显示为手型
  )}
  data-cy="marketing-box-button"
>
  {buttonText}
</Link>

方案2：手动在<button>中触发导航 #

如果必须使用<button>（比如需要表单提交等按钮专属行为），可以通过点击事件手动处理导航逻辑：

import { useRouter } from 'next/router';

// 组件内部
const router = useRouter();

const handleNavigation = () => {
  if (data.isButtonUrlExternal) {
    window.open(data.buttonUrl, '_blank', 'noopener');
  } else {
    router.push(data.buttonUrl);
  }
};

<button
  data-cy="marketing-box-button"
  className={classNames(
    'text-sm !px-5 max-w-fit uppercase',
    getButtonStyle(buttonStyle)
  )}
  variant="primary"
  onClick={handleNavigation}
>
  {buttonText}
</button>

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