在 next.js 中，可通过将按钮嵌套在 `` 标签内并设置 `target="_blank"` 和 `rel="noreferrer"` 实现外部链接的新标签页跳转，既符合语义化规范，又确保安全性和兼容性。
在 Next.js（尤其是 App Router 或 Pages Router）中，直接为 <button> 绑定 window.open() 或使用 onClick 处理跳转虽可行，但不符合 HTML 语义化原则，且可能影响可访问性（如屏幕阅读器识别、键盘导航）和 SEO。最佳实践是用语义化的 <a> 标签承载导航行为，再通过 CSS 保持按钮样式。
✅ 正确做法：将 <button> 作为 <a> 的子元素（注意：此嵌套在 HTML5 中完全合法，且被所有现代浏览器支持），并添加关键属性：
<a
href="https://www.php.cn/link/b57f7e3c691e9086caa881b52de2a661"
target="_blank"
rel="noreferrer noopener"
className={styles.googleButton}
>
<img className={styles.image} src="/assets/pictures/google.jpg" alt="Google logo" />
<p className={styles.buttonText}>Go To Google</p>
<img src="/assets/icons/external-link.svg" alt="Open in new tab" />
</a>? 关键说明：
- target="_blank"：强制在新标签页（或窗口）中打开链接；
- rel="noreferrer noopener"：
- noreferrer 防止目标页面通过 document.referrer 获取来源页 URL，提升隐私性；
- noopener 防止新页面通过 window.opener 访问原页面的 window 对象（避免潜在的安全风险，如恶意页面调用 window.opener.location.replace() 进行钓鱼）；
- 路径前加 /（如 /assets/...）：确保资源路径相对于应用根目录，适配 Next.js 的静态文件服务机制（public 目录下文件需以 / 开头引用）；
- alt 属性：为图标添加有意义的替代文本，增强可访问性（WCAG 合规必需）。
⚠️ 注意事项：
- ❌ 不要使用 <button onClick={() => window.open('...')}> —— 它无法通过键盘 Enter 触发（除非额外处理 onKeyDown），也不支持右键“在新标签页中打开”等原生浏览器功能；
- ❌ 避免仅写 rel="noreferrer" 而遗漏 noopener：二者应共存，noopener 是防范 window.opener 攻击的核心；
- ✅ 若需动态链接或条件跳转，可将 href 设为变量（如 href={externalUrl}），但仍建议保持 <a> 包裹结构。
总结：在 Next.js 中实现“按钮式外观 + 外部链接 + 新标签页打开”，应优先采用语义化 <a> 标签方案——它简洁、安全、可访问、无需 JavaScript 即可工作，是现代 Web 开发的标准实践。
