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

Posted 2023-02-16

【中文标题】Nextjs - 如果在客户端运行，则注入 ContextProvider

【英文标题】：Nextjs - Inject ContextProvider if running in client side

【发布时间】：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 工作正常并且没有抛出任何错误。

【参考方案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