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

Question

如何确保我的上下文提供程序仅运行在客户端。

我在 _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 工作正常并且没有抛出任何错误。

Answer 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

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

Nextjs - Inject ContextProvider if running in client side

websocket

reactjs

next.js

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

Nextjs - Inject ContextProvider if running in client side

websocket

reactjs

next.js

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