如何在 Next.js 中点击按钮跳转到外部链接并在新标签页打开

在 next.js 中，可通过将按钮嵌套在 `` 标签内并设置 `target="_blank"` 和 `rel="noreferrer"` 实现外部链接的新标签页跳转，既符合语义化规范，又确保安全性和兼容性。

在 Next.js（尤其是 App Router 或 Pages Router）中，直接为 绑定 window.open() 或使用 onClick 处理跳转虽可行，但不符合 HTML 语义化原则，且可能影响可访问性（如屏幕阅读器识别、键盘导航）和 SEO。最佳实践是用语义化的 标签承载导航行为，再通过 CSS 保持按钮样式。

✅ 正确做法：将 作为 的子元素（注意：此嵌套在 HTML5 中完全合法，且被所有现代浏览器支持），并添加关键属性：

  @@##@@
  
Go To Google
  @@##@@

? 关键说明：

• target="_blank"：强制在新标签页（或窗口）中打开链接；
• rel="noreferrer noopener"：
  • noreferrer 防止目标页面通过 document.referrer 获取来源页 URL，提升隐私性；
  • noopener 防止新页面通过 window.opener 访问原页面的 window 对象（避免潜在的安全风险，如恶意页面调用 window.opener.location.replace() 进行钓鱼）；
• 路径前加 /（如 /assets/...）：确保资源路径相对于应用根目录，适配 Next.js 的静态文件服务机制（public 目录下文件需以 / 开头引用）；
• alt 属性：为图标添加有意义的替代文本，增强可访问性（WCAG 合规必需）。

⚠️ 注意事项：

• ❌ 不要使用 window.open('...')}> —— 它无法通过键盘 Enter 触发（除非额外处理 onKeyDown），也不支持右键“在新标签页中打开”等原生浏览器功能；
• ❌ 避免仅写 rel="noreferrer" 而遗漏 noopener：二者应共存，noopener 是防范 window.opener 攻击的核心；
• ✅ 若需动态链接或条件跳转，可将 href 设为变量（如 href={externalUrl}），但仍建议保持 包裹结构。

总结：在 Next.js 中实现“按钮式外观 + 外部链接 + 新标签页打开”，应优先采用语义化 标签方案——它简洁、安全、可访问、无需 JavaScript 即可工作，是现代 Web 开发的标准实践。