ReferenceError: window is not defined NextJS

Question

在為生產構建應用程序時出現錯誤。 它一直說ReferenceError: window is not defined 。 我迷失了解決問題

全碼：

const [windowSize, setWindowSize] = useState<WindowInfo>({
        width: window.innerWidth,
        height: window.innerHeight,
    });

    useEffect(() => {
        if (typeof window !== "undefined") { // error showing in this line
            function handleResize() {
                const data: WindowInfo = {
                    width: window.innerWidth,
                    height: window.innerHeight,
                }

                setWindowSize(data);
            }

            window.addEventListener("resize", handleResize);

            handleResize();

            return () => window.removeEventListener("resize", handleResize);
        }
    }, []);

任何人都可以告訴我這個問題的解決方法

Answer 1

window僅是瀏覽器。 在 NodeJS 服務器上，不會定義window 。

您已經在useEffect內部處理了這個問題，但不是在useState中。 你需要這樣的東西：

const isBrowser = (typeof window !== "undefined");
const [windowSize, setWindowSize] = useState<WindowInfo>({
    width: isBrowser ? window.innerWidth : 0,
    height: isBrowser ? window.innerHeight : 0,
});

我在上面使用 0 作為默認值，但您可以使用對您的項目有意義的任何值。