如何用Next.js Link组件处理电话号码？遇tel链接报错咨询

哈哈，这个问题我之前踩过坑！其实Next.js的Link组件确实不直接支持tel:这类外部协议链接，它的核心定位是处理应用内部的路由跳转（比如页面间的相对路径、同域名路由），对于tel:、mailto:这类外部协议的URL，next/router的校验逻辑会直接抛出你看到的「Invalid href passed to router」错误。

为什么会这样？ #

Next.js的Link组件底层依赖的路由系统会对传入的href做严格格式校验，只允许符合内部路由规则的路径通过，外部协议不在它的支持范围内——毕竟Link的设计初衷是优化单页应用的客户端路由跳转，而非处理外部协议链接。

那怎么实现电话跳转？ #

有两种简单的解决方案：

• 直接使用原生<a>标签（最推荐）
  如果只是需要一个普通的电话链接，完全不需要借助Link组件，原生<a>标签可以完美识别tel:协议，浏览器会自动处理跳转逻辑：

  <a href="tel:+15555555555">Call Us</a>
  

• 一定要用Link组件的话，通过passHref兼容
  如果你因为样式、路由状态等原因必须用Link，可以结合passHref和legacyBehavior（Next.js 13+版本可能需要额外配置客户端组件）：

  'use client'; // App Router 下需要添加这个指令
  import Link from 'next/link';
  
  <Link href="tel:+15555555555" passHref legacyBehavior>
    <a>Call Us</a>
  </Link>
  

  这种方式会让Link把href传递给内部的<a>标签，由原生标签处理外部协议跳转。

另外，如果你用的是Next.js 13的App Router，也可以直接在客户端组件里使用原生<a>标签，完全不会有问题，反而比强行用Link更简洁。

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