How do i handle phone number, address and email in nextjs [duplicate]

Question

Currently I am using nextjs/Link for handling tlf number and email inside of a contacts section in my footer. I use href property to send the user to mailto or directly to google maps when they click on the respective link. I read that using next/link for this purpose is not a good practise. What should i be using instead? here is a snippet of my code:

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;

Scleritis

Answer 1

If your links lead to an external resource then you can use regular <a> tag without Next.js <Link>, same with mail or phone links and etc. Basically Link is only needed if you want to have SPA internal navigation between your own routes (navigation that will not reload the page).

Quijano