NextJS构建报错location未定义：use client组件为何仍被预渲染？

核心问题分析 #

1. 为什么加了"use client"还是会预渲染？
   Next.js 对客户端组件并非完全跳过服务器端处理——构建时会对所有组件（包括客户端组件）做静态分析和预渲染尝试，目的是生成静态HTML骨架或收集路由信息，这个阶段没有浏览器环境，直接访问window.location这类浏览器全局变量就会报错。
2. usePathname本身不会导致报错
   栈追踪指向Next.js内部并非usePathname的问题，这个官方钩子是专为跨环境设计的：服务器端从路由上下文取路径，客户端才关联浏览器location。错误根源是你代码里直接引用了location全局变量。

你的处理方式的问题 #

用typeof location !== "undefined"做判断能临时解决，但不是最优解——完全没必要直接碰浏览器全局变量，Next.js的路由钩子已经帮你做好了环境兼容。

正确修正方案 #

1. 用useEffect处理跳转逻辑 #

useEffect只会在客户端执行，避免服务器端触发跳转代码：

"use client";
// ... 其他导入和代码

export default function RootTemplate({ children }) {
  const router = useRouter();
  const pathname = usePathname();
  const { useSession } = useContext(AuthContext);
  const { session: data, status } = useSession();

  // 客户端环境下处理未认证跳转
  useEffect(() => {
    if (status === "unauthenticated") {
      const allowedPaths = ["/login", "/register"];
      if (!allowedPaths.includes(pathname)) {
        router.push("/login");
      }
    }
  }, [status, pathname, router]);

  // 加载状态时返回Loading
  if (status === "loading") {
    return <Loading />;
  }

  // 已认证或在允许的页面，直接渲染内容
  if (status === "authenticated" || ["/login", "/register"].includes(pathname)) {
    return <>{children}</>;
  }

  // 未认证且不在允许页面，等待useEffect跳转，返回Loading
  return <Loading />;
}

2. 移除直接引用location的代码 #

彻底删掉typeof location !== "undefined"这类判断，完全依赖Next.js提供的路由和状态钩子，从根源避免环境兼容问题。

总结 #

• "use client"只是标记组件在客户端运行，不代表完全跳过服务器端的静态分析/预渲染步骤；
• 官方路由钩子（usePathname、useRouter）本身兼容服务器端，错误是你直接访问浏览器全局变量导致的；
• 用useEffect处理客户端专属逻辑，是Next.js中更规范的跨环境兼容方式。

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