Nextjs - 如果在客户端运行，则注入 ContextProvider答案

【问题标题】：Nextjs - Inject ContextProvider if running in client sideNextjs - 如果在客户端运行，则注入 ContextProvider
【发布时间】：2021-05-05 03:48:56
【问题描述】：

如何确保我的 contextprovider 仅在客户端运行。

我在_app.tsx 中使用了两个提供程序，即 ChakraProvider（用于 chakra-ui）和 SocketProvider（用于 websocket）。

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider>
      <SocketProvider wsUrl={'ws://localhost:4000/socket'}>
        <Component {...pageProps} />
      </SocketProvider>
    </ChakraProvider>
  );
}

当我尝试访问该页面时，它说：

Server Error

TypeError: Cannot read property 'WebSocket' of undefined

但是当我在客户端尝试它时，SocketProvider 工作正常并且没有抛出任何错误。

【问题讨论】：

标签： reactjs websocket next.js

【解决方案1】：

你可以使用这个checkWindow函数来检测客户端：

export default () => typeof window !== 'undefined';

资源：https://github.com/vercel/next.js/issues/5354#issuecomment-520305040

更新：

在 Next.js 中使用套接字的好例子：https://github.com/vercel/next.js/tree/442fbfaa4d4e8205cf10c7e5d27b8f51b7a4bdc6/examples/with-socket.io

【讨论】：