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