如何在 Next.js 中安全获取当前 URL（服务端与客户端双场景方案）-js教程-PHP中文网

本文详解在 Next.js 中不依赖 window.location.href 或 React Router 获取当前 URL 的最佳实践，涵盖服务端渲染（getServerSideProps）和客户端路由（useRouter）两种核心方案，并提供代码示例与关键注意事项。

本文详解在 next.js 中不依赖 `window.location.href` 或 react router 获取当前 url 的最佳实践，涵盖服务端渲染（getserversideprops）和客户端路由（userouter）两种核心方案，并提供代码示例与关键注意事项。

在 Next.js 应用中，直接访问 window.location.href 会引发服务端渲染（SSR）错误，因为 window 对象仅在浏览器环境中存在。为确保应用在 SSR、静态生成（SSG）及客户端路由切换时均能可靠获取当前 URL，必须根据执行环境选择合适的方法。

✅ 服务端场景：使用 getServerSideProps 获取完整请求上下文

当需要在页面首次渲染前获取原始请求 URL（如用于 SEO、权限校验或动态重定向），应利用 getServerSideProps 的 context 参数。它提供了完整的 Node.js HTTP 请求对象（req），可安全读取主机、协议、路径及查询参数：

// pages/example.tsx
export const getServerSideProps = async (context) => {
  const { req } = context;
  const { origin, href, pathname, query } = new URL(
    req.url || '',
    `${req.headers['x-forwarded-proto'] || 'http'}://${req.headers.host}`
  );

  return {
    props: {
      fullUrl: href,        // 如 https://example.com/blog?id=123
      origin,               // 如 https://example.com
      pathname,             // 如 /blog
      query                 // 如 { id: '123' }
    }
  };
};

export default function ExamplePage({ fullUrl, origin, pathname, query }) {
  return (
    <div>
      <h2>服务端解析的 URL 信息</h2>
      <p>完整地址：<code>{fullUrl}</code></p>
      <p>根域名：<code>{origin}</code></p>
      <p>路径：<code>{pathname}</code></p>
      <p>查询参数：<code>{JSON.stringify(query)}</code></p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9063" title="chartjs-reporter"><img
														src="https://img.php.cn/upload/skill/000/000/081/179239514984446.jpg" alt="chartjs-reporter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill9063" title="chartjs-reporter" class="overflowclass">chartjs-reporter</a>
													<p class="overflowclass">此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill9063" title="chartjs-reporter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
    </div>
  );
}

⚠️ 注意事项：

req.url 默认为相对路径（如 /blog?id=123），需手动拼接 origin 才能得到绝对 URL；
若部署在反向代理（如 Nginx、Vercel）后，务必通过 x-forwarded-proto 和 host 头构造正确协议与域名；
此方法仅适用于页面级数据获取（pages 目录），不适用于组件内部。

✅ 客户端场景：使用 useRouter 获取路由状态

对于交互式操作（如点击按钮复制当前路径、根据路由动态更新 UI），推荐使用 Next.js 内置的 useRouter Hook。它在客户端完全可用，且支持实时响应路由变化：

// components/CurrentPathDisplay.tsx
'use client'; // 必须声明为客户端组件（App Router 下）

import { useRouter } from 'next/navigation';

export default function CurrentPathDisplay() {
  const router = useRouter();
  const { pathname, query } = router;

  return (
    <div>
      <h3>当前客户端路由</h3>
      <p>路径：<code>{pathname}</code></p>
      <p>查询参数：<code>{JSON.stringify(query)}</code></p>
      <button onclick="{()"> navigator.clipboard.writeText(window.location.href)}
        className="mt-2 px-3 py-1 bg-blue-500 text-white rounded"
      >
        复制完整 URL
      </button>
    </div>
  );
}

? 提示：

useRouter 返回的 pathname 不含查询参数，query 是解析后的对象（字符串值自动解码）；
在 App Router（app/ 目录）中，使用 next/navigation 的 useRouter；在 Pages Router（pages/ 目录）中，使用 next/router；
若需完整 URL 字符串（含协议、域名），仍可安全使用 window.location.href —— 但仅限客户端组件内且确保已挂载（可通过 useEffect 或 typeof window !== 'undefined' 判断）。

? 总结：按需选择，避免常见陷阱

场景	推荐方案	是否 SSR 安全	可获取内容
页面初始数据（如 SEO、鉴权）	getServerSideProps + context.req	✅ 是	原始请求 URL、headers、IP 等
客户端交互与路由监听	useRouter	❌ 否（仅客户端）	pathname、query、asPath（带 hash）
需要绝对 URL 字符串（客户端）	window.location.href（配合 'use client' 和挂载检查）	❌ 否	完整浏览器地址栏 URL