
在 next.js 中,可通过将按钮包裹在 `` 标签中,并设置 `target="_blank"` 和 `rel="noreferrer"` 实现安全、合规的外部链接新标签页跳转。
在 Next.js(尤其是 App Router 或 Pages Router)中,不推荐直接使用 JavaScript 的 window.open() 或 onClick 处理外部跳转,因为这会绕过 native 导航语义,影响可访问性(a11y)、SEO 和浏览器安全策略。正确且符合 Web 标准的做法是:用语义化 标签承载导航行为,再将按钮作为其子元素。
✅ 推荐写法(语义清晰、无障碍友好、自动支持右键菜单/中键点击):
@@##@@Go To Google
@@##@@
⚠️ 注意事项:
- 路径前缀 /: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 或组件,但底层仍应基于 标签实现导航,以保障基础可用性与兼容性。










