本文详解如何使用 next/link 在 Next.js 中实现类似 Flutter Navigator.push 的页面跳转并传参，支持新标签页打开及 URL 查询参数传递，兼顾服务端渲染兼容性与开发体验。
本文详解如何使用 `next/link` 在 next.js 中实现类似 flutter `navigator.push` 的页面跳转并传参，支持新标签页打开及 url 查询参数传递，兼顾服务端渲染兼容性与开发体验。
在 Next.js（尤其是 Pages Router）中，无法像 Flutter 那样直接将 React 组件实例连同 props 一并“推入”导航栈（如 MaterialPageRoute(builder: (ctx) => Page({title, desc}))）。这是因为 Next.js 的路由本质是基于 URL 的声明式导航，组件生命周期由路由匹配驱动，而非内存中的对象传递。但通过标准、安全且 SSR 友好的方式——利用 URL 查询参数（query string）传递轻量数据，我们完全可以实现等效功能：点击链接后在新标签页打开目标页面，并让该页面精准读取并渲染传入的 title 和 desc 等信息。
✅ 正确做法：Link + query + useRouter
1. 发送端：构造带参数的 Link（支持新标签页）
// pages/sender.tsx
import Link from 'next/link';
const SenderPage = () => {
const exampleTitle = '欢迎来到仪表盘';
const exampleDesc = '这是通过链接传递的动态描述';
return (
<Link
href={{
pathname: '/page', // ✅ 目标页面路径（对应 pages/page.tsx）
query: {
title: exampleTitle,
desc: exampleDesc
}
}}
passHref
>
{/* 使用 <a> 标签并显式添加 target="_blank" */}
<a
target="_blank"
rel="noopener noreferrer"
className="inline-block px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
>
在新标签页打开页面
</a>
</Link>
);
};
export default SenderPage;⚠️ 注意事项：
- passHref 是必需的：它确保 <a> 标签获得正确的 href 属性（如 /page?title=...&desc=...），这对 SEO、可访问性和浏览器原生行为至关重要。
- target="_blank" 必须配合 rel="noopener noreferrer" 使用，防止潜在的安全风险（如 window.opener 滥用）。
- pathname 必须与 pages/ 下的实际文件路径严格一致（如 pages/about.tsx → pathname: '/about'）。
2. 接收端：使用 useRouter 解析 query 参数
// pages/page.tsx
import { useRouter } from 'next/router';
const Page = () => {
const router = useRouter();
// ✅ router.query 是一个字符串字典（所有值均为 string）
// 类型安全建议：使用 as const 或自定义类型断言
const { title, desc } = router.query;
// 处理加载中状态（因 query 在客户端才可用）
if (!title || !desc) {
return <div className="p-4">加载中...</div>;
}
return (
<div className="p-6 max-w-2xl mx-auto">
<h1 className="text-2xl font-bold text-gray-800">{title}</h1>
<p className="mt-2 text-gray-600">{desc}</p>
<div className="mt-4 text-sm text-gray-500">
<p>当前 URL 参数: {JSON.stringify(router.query)}</p>
</div>
</div>
);
};
export default Page;? 关键说明：
- router.query 在服务端渲染（SSR）时为空对象 {}，首次客户端渲染后才填充实际值。因此需做空值检查或使用 useEffect + useState 做更精细的加载控制。
- 所有 query 值均为 string 类型。若需传递布尔值、数字或嵌套对象，请先序列化（如 JSON.stringify）再编码（encodeURIComponent），接收端反向解析（不推荐复杂结构，建议仅用于简单标识符或短文本）。
❌ 常见误区与澄清
-
不要混用 next/navigation（App Router）与 next/link（Pages Router）：
你提到的 next/navigation 是 App Router（app/ 目录）专用的导航 API；而 next/link 是 Pages Router（pages/ 目录）的核心组件。二者不可跨 Router 使用。请确认你的项目结构：- 若使用 pages/ → 全程用 next/link + useRouter
- 若使用 app/ → 应改用 useRouter（来自 next/navigation）+ Link（同包）+ searchParams（非 query）
不推荐通过 window.open() + props 模拟：
尝试 window.open('/page', '_blank') 后在新窗口中 postMessage 传参，会破坏 SSR、SEO 和路由一致性，且增加跨窗口通信复杂度，违背 Next.js 设计哲学。
✅ 最佳实践总结
| 场景 | 推荐方案 |
|---|---|
| Pages Router（pages/） | next/link + href.query + useRouter().query |
| App Router（app/） | Link（next/navigation） + searchParams（服务端组件直接读取）或 useSearchParams()（客户端组件） |
| 需传递敏感/大量数据 | 改用 localStorage / sessionStorage + 路由跳转，或后端 API 预存 ID 再查询 |
| 类型安全增强 | 为 router.query 添加类型守卫，例如： if (typeof title === 'string' && typeof desc === 'string') { ... } |
通过以上方式，你不仅能安全、高效地实现“带参跳转新页”，还能完全契合 Next.js 的服务端渲染、静态生成与客户端导航能力。URL 即状态，既是约束，也是 Next.js 可靠性的基石。
