Nextjs 在没有 useEffect() 或动态导入的情况下处理“窗口未定义”？

Question

因此，在 nextjs 中，由于 SSR，您会收到

window is not defined

错误（即

window

未在服务器环境中定义）。

解决此问题的典型方法是使用动态导入或将所需内容放入

useEffect()

钩子内。但我不知道这如何与我当前的代码一起工作。目前我在此助手中初始化 firebase 函数：

export const functions = (() => {
    const functions = getFunctions(!getApps().length ? initializeApp(firebaseConfig) : getApp());
    if (window?.location?.hostname === "localhost") {
        connectFunctionsEmulator(functions, '127.0.0.1', 5001)
    }
    return functions
})()

仅当域为

localhost

时，才会连接 firebase 函数模拟器。如果我要在各处的

useEffect()

钩子中初始化 firebase 函数，事情会变得非常混乱，而且我无法进行动态导入，因为它仅适用于组件。

所以我的问题是，如何推迟检查主机名是什么，直到它加载到客户端为止？或者还有其他办法解决这个问题吗？

Answer 1

我最终使用了带有

useEffect()

的自定义钩子。毕竟它实际上并没有那么混乱。

export const functions =  getFunctions(app);

export const useEmulator = () => {
    useEffect(() => {
        if (window?.location?.hostname === "localhost") {
            connectFunctionsEmulator(functions, '127.0.0.1', 5001)
        }
    }, [])
}