在 next.js 中，可通过将按钮包裹在 `` 标签中，并设置 `target="_blank"` 和 `rel="noreferrer"` 实现安全、合规的外部链接新标签页跳转。
在 Next.js（尤其是 App Router 或 Pages Router）中，不推荐直接使用 JavaScript 的 window.open() 或 onClick 处理外部跳转，因为这会绕过 native 导航语义，影响可访问性（a11y）、SEO 和浏览器安全策略。正确且符合 Web 标准的做法是：用语义化 <a> 标签承载导航行为，再将按钮作为其子元素。
✅ 推荐写法（语义清晰、无障碍友好、自动支持右键菜单/中键点击）：
<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=""
aria-hidden="true"
/>
</a>⚠️ 注意事项：
- 路径前缀 /：Next.js 中静态资源（如 assets/...）应放在 public/ 目录下，引用时使用绝对路径 /assets/...（而非 assets/...），否则可能 404；
- rel 属性必须包含 noreferrer（防止 referrer 泄露）和 noopener（防范 window.opener 安全漏洞），二者常合并写作 rel="noreferrer noopener"；
- 避免嵌套交互元素：原代码中 <button> 内含 <a> 是无效 HTML；而 <a> 包裹 <button> 虽能工作，但更佳实践是直接用 <a> + CSS 模拟按钮样式（提升语义与可访问性）；
- 可访问性增强：为图标添加 alt="" 并设 aria-hidden="true"，为主文本提供明确语义；若按钮有重要功能，建议补充 aria-label（如 aria-label="Open Google in new tab"）。
? 进阶提示：若需在 App Router 中统一处理外部链接（例如添加加载状态或埋点），可封装为自定义 Hook 或组件，但底层仍应基于 <a> 标签实现导航，以保障基础可用性与兼容性。
