如何在Next.js中为react-icons添加外链及mailto链接？

react-icons提供的图标组件本身不支持href属性，直接给AiFillLinkedin或AiFillMail添加href不会生效，需要用链接标签包裹图标组件来实现跳转功能。

正确实现代码 #

import { AiFillLinkedin, AiFillMail } from 'react-icons/ai';

// 在组件中使用
<div className="text-5xl flex justify-center gap-16 py-3 text-gray-600 dark:text-gray-50">
  {/* LinkedIn图标跳转 */}
  <a 
    href="https://your-linkedin-profile-url" 
    target="_blank" 
    rel="noopener noreferrer"
    className="cursor-pointer"
  >
    <AiFillLinkedin />
  </a>

  {/* 邮件图标mailto功能 */}
  <a 
    href="mailto:info@mailgo.dev"
    className="cursor-pointer"
  >
    <AiFillMail />
  </a>
</div>

补充说明 #

• 对于外部链接（如LinkedIn），添加target="_blank"让链接在新窗口打开，rel="noopener noreferrer"是安全规范，防止新页面获取原页面的控制权。
• 可以给<a>标签添加内边距（比如p-2）来扩大点击区域，提升交互体验：

  <a href="https://your-linkedin-profile-url" target="_blank" rel="noopener noreferrer" className="p-2 cursor-pointer">
    <AiFillLinkedin />
  </a>
  

• Next.js项目中，外部链接使用普通<a>标签即可，内部路由才需要使用next/link组件。

内容的提问来源于stack exchange，提问作者joshua terrence