我如何在 nextjs 中处理电话号码、地址和电子邮件

Question

目前，我正在使用 nextjs/Link 来处理页脚联系人部分内的 tlf 号码和电子邮件。当用户单击相应的链接时，我使用 href 属性将用户发送到 mailto 或直接发送到谷歌地图。我读到为此目的使用 next/link 并不是一个好的做法。我应该用什么来代替？这是我的代码片段：

interface Props {
  contact: ContactType;
}

function Contact({ contact }: Props) {
  return (
    <Link href={contact.href ?? ''}>
      <a className="flex gap-x-5" target={contact.target ?? ''}>
        {contact.icon ? (
          <div className="relative w-5 h-5">
            <Image width={15} height={15} src={contact.icon} />
          </div>
        ) : null}
        <p> {contact.name} </p>
      </a>
    </Link>
  );

}

export default Contact;

Answer 1

如果您的链接指向外部资源，那么您可以使用<a>没有 Next.js 的常规标签<Link>，与邮件或电话链接等相同。基本上Link只有当您想在自己的路线之间进行 SPA 内部导航时才需要（不会重新加载的导航）这一页）。