Next.js - 即使使用使用效率和typeof窗口！=='undefined'check

Question

我正在从事一个我正在遇到错误的下一个项目：JS项目：

Error occurred prerendering page "/dashboard". Read more: https://nextjs.org/docs/messages/prerender-error ReferenceError: window is not defined at new u (D:\Projects\FREELANCE\ROAD RUNNER RSA\Frontend\.next\server\chunks\500.js:13:9122)

我尝试了什么 通过包装窗口在usausefect内部包装窗口，可以确保代码仅在浏览器中运行：

useEffect(() => {
  if (typeof window !== "undefined") {
    const scrollbarWidth =
      window.innerWidth - document.documentElement.clientWidth;
    setScrollbarWidth(scrollbarWidth);
  }
}, []);

检查组件是客户组件，通过在文件顶部添加“使用客户端”：

"use client";
import { useEffect, useState } from "react";

3.Checked的第三方库（Lucide-React，Framer-Motion，Next/Navigation和 @Radix-UI/React-Visallial-Visally Hidded）确保它们都没有访问服务器上的窗口。

Answer 1

•   Avoid Module-Level Window References: Ensure that no code accesses window outside of useEffect or other browser-only functions.
•   Review Imported Components: Check if any imported component (even in client components) references window at the module level.
•   Use Dynamic Imports: For components that require window, import them dynamically with SSR disabled:
import dynamic from 'next/dynamic';

CONSTclientOnlyComponent = dynamic（（）=> import（'./ yourcomponent'），{ssr：false}）; •检查_app.js和_document.js：确保这些文件没有任何服务器端窗口参考。