本文介绍在 Next.js 中不依赖 window.location.href 或 React Router 获取当前 URL 的多种可靠方法，涵盖服务端渲染（SSR）、客户端路由及静态生成（SSG）场景，并提供代码示例与关键注意事项。
本文介绍在 next.js 中不依赖 `window.location.href` 或 react router 获取当前 url 的多种可靠方法，涵盖服务端渲染（ssr）、客户端路由及静态生成（ssg）场景，并提供代码示例与关键注意事项。
在 Next.js 应用中，直接使用 window.location.href 会导致服务端渲染（SSR）失败，因为 window 对象仅存在于浏览器环境；而过度依赖第三方路由库（如 React Router）则违背 Next.js 原生路由设计哲学。为此，Next.js 提供了更契合其渲染模型的原生方案，需根据执行上下文（服务端 vs 客户端）选择合适方式。
✅ 服务端：通过 getServerSideProps 获取完整请求 URL
当需要在页面首次渲染前获取服务端视角下的完整 URL 信息（如协议、主机名、路径、查询参数），应使用 getServerSideProps。其 context 参数包含 req 对象，可安全访问 Node.js HTTP 请求头：
// pages/index.tsx
export const getServerSideProps = async (context) => {
const { req } = context;
const protocol = req.headers['x-forwarded-proto'] || 'http';
const host = req.headers.host || 'localhost';
const fullUrl = `${protocol}://${host}${req.url}`;
return {
props: {
fullUrl,
hostname: host,
pathname: new URL(req.url || '/', `https://${host}`).pathname,
searchParams: Object.fromEntries(new URLSearchParams(new URL(req.url || '/', `https://${host}`).search))
}
};
};
export default function Home({ fullUrl, hostname, pathname }: {
fullUrl: string;
hostname: string;
pathname: string;
}) {
return (
<div>
<h2>服务端解析的 URL</h2>
<p>完整地址：<code>{fullUrl}</code></p>
<p>主机名：<code>{hostname}</code></p>
<p>路径名：<code>{pathname}</code></p>
</div>
);
}
⚠️ 注意：req.url 包含原始路径+查询字符串（如 /blog?id=123），但不含协议和主机。若部署在反向代理（如 Nginx、Vercel）后，需通过 x-forwarded-proto 和 x-forwarded-host 头补全协议与域名，确保生成的 URL 准确。
Json Schema Toolkit下载使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
✅ 客户端：使用 useRouter 获取动态路由状态
对于客户端导航后的 URL 变化（如点击 、调用 router.push()），推荐使用 Next.js 内置的 useRouter Hook。它返回的 router 对象提供实时、响应式的路由信息，且完全兼容 CSR/SSR 混合场景：
// components/CurrentPath.tsx
'use client'; // 显式声明为客户端组件（Next.js 13+ App Router 推荐）
import { useRouter } from 'next/router';
export default function CurrentPath() {
const router = useRouter();
// router.isReady 确保路由已初始化（避免 SSR 时读取 undefined）
if (!router.isReady) return <span>Loading...</span>;
const { pathname, query, asPath } = router;
return (
<div>
<h3>客户端当前路由</h3>
<p><strong>路径名：</strong><code>{pathname}</code></p>
<p><strong>查询参数：</strong><code>{JSON.stringify(query)}</code></p>
<p><strong>实际访问路径（含动态段）：</strong><code>{asPath}</code></p>
</div>
);
}
? 提示：asPath 返回浏览器地址栏显示的完整路径（含查询字符串），适合日志记录或分析；pathname 是规范化后的路由路径（不含查询参数），适合条件判断；query 自动解析为对象，无需手动 URLSearchParams。
? 不推荐的做法与替代建议
- ❌ 避免在服务端组件（或 getStaticProps/getServerSideProps）中使用 new URL(window.location.href) —— window 未定义，将抛出 ReferenceError。
- ❌ 避免在 useEffect 中无条件读取 window.location —— 虽可运行，但破坏服务端一致性，且无法在初始 HTML 中预渲染 URL 相关内容。
- ✅ 替代方案：如需在服务端生成带当前 URL 的 Open Graph 标签，应在 getServerSideProps 中计算并注入 props；如需客户端实时监听 URL 变化，可结合 useRouter 的 events（如 router.events.on('routeChangeStart')）。
总结
| 场景 | 推荐方法 | 关键优势 |
|---|---|---|
| 服务端首次渲染（SSR） | getServerSideProps + context.req | 安全、完整、可服务端预计算 |
| 客户端导航与交互 | useRouter Hook | 响应式、轻量、与 Next.js 路由深度集成 |
| 静态生成（SSG）页面 | getStaticProps（无法获取“当前”URL，因无请求上下文）→ 改用 useRouter 客户端补充 | 保持静态性，兼顾运行时灵活性 |
掌握这些原生机制，不仅能规避常见错误，还能构建更健壮、可维护的 Next.js 应用。始终牢记：服务端逻辑归服务端，客户端状态归客户端，Next.js 的约定优于配置，是最佳实践的起点。
