在 next.js 中，可通过将按钮嵌套在 `` 标签内并设置 `target="_blank"` 和 `rel="noreferrer"` 实现外部链接的新标签页跳转，既符合语义化规范，又确保安全性和兼容性。
在 Next.js（尤其是 App Router 或 Pages Router）中，直接为
✅ 正确做法：将
<a
href="https://www.php.cn/link/b57f7e3c691e9086caa881b52de2a661"
target="_blank"
rel="noreferrer noopener"
className={styles.googleButton}
>
@@##@@
<p className={styles.buttonText}>Go To Google</p>
@@##@@
</a>? 关键说明：
- target="_blank"：强制在新标签页（或窗口）中打开链接；
- rel="noreferrer noopener"：
- noreferrer 防止目标页面通过 document.referrer 获取来源页 URL，提升隐私性；
- noopener 防止新页面通过 window.opener 访问原页面的 window 对象（避免潜在的安全风险，如恶意页面调用 window.opener.location.replace() 进行钓鱼）；
- 路径前加 /（如 /assets/...）：确保资源路径相对于应用根目录，适配 Next.js 的静态文件服务机制（public 目录下文件需以 / 开头引用）；
- alt 属性：为图标添加有意义的替代文本，增强可访问性（WCAG 合规必需）。
⚠️ 注意事项：
- ❌ 不要使用
- ❌ 避免仅写 rel="noreferrer" 而遗漏 noopener：二者应共存，noopener 是防范 window.opener 攻击的核心；
- ✅ 若需动态链接或条件跳转，可将 href 设为变量（如 href={externalUrl}），但仍建议保持 包裹结构。
总结：在 Next.js 中实现“按钮式外观 + 外部链接 + 新标签页打开”，应优先采用语义化 标签方案——它简洁、安全、可访问、无需 JavaScript 即可工作，是现代 Web 开发的标准实践。
