Next.js如何实现默认同页跳转、command+点击/右键打开新标签？

核心原因说明 #

两种常用方案不符合需求的根本原因：

• router.push 是纯JS客户端导航逻辑，没有绑定原生<a>标签的默认行为，浏览器无法识别为可跳转链接，自然不支持修饰键开新标签、右键菜单跳转选项
• window.open 是强制触发新标签打开逻辑，没有做点击场景判断，不符合默认同页跳转的要求

最优解决方案：使用Next.js原生<Link>组件 #

Next.js 官方提供的 <Link> 组件已经默认封装了所有需求场景的行为，无需额外自定义逻辑：

• 普通左键点击：走Next.js客户端路由，当前标签页跳转
• 按住command（Mac）/ctrl（Windows）点击：自动在新标签页打开
• 鼠标右键呼出菜单：自带「在新标签页打开」「在新窗口打开」等原生链接选项

用法示例 #

// App Router 和 Pages Router 均从 next/link 引入即可
import Link from 'next/link'

function Navigation() {
  return (
    <div>
      {/* 直接使用，默认渲染为带href的<a>标签 */}
      <Link href="/user/profile">
        个人中心
      </Link>
      {/* 也可以包裹自定义UI元素，比如按钮 */}
      <Link href="/article/123">
        <button type="button">查看文章</button>
      </Link>
    </div>
  )
}

特殊场景替代方案：自定义点击事件处理 #

如果有特殊场景不能直接使用<Link>组件，可以自行实现修饰键判断逻辑，必须保留带href属性的<a>标签包裹，才能保证右键菜单正常显示：

// App Router 引入方式
import { useRouter } from 'next/navigation' 
// Pages Router 请改为从 'next/router' 引入 useRouter

function CustomLink({ href, children }) {
  const router = useRouter()

  const handleClick = (e) => {
    // 存在修饰键/非左键点击时不拦截，走原生链接行为
    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) {
      return
    }
    // 普通左键点击时走客户端路由跳转
    e.preventDefault()
    router.push(href)
  }

  return (
    <a href={href} onClick={handleClick}>
      {children}
    </a>
  )
}

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