禁用 ssr for useMediaQuery for Next.js

Question

响应 Next.js 13

我想使用这个useMediaQuery

import { useMediaQuery } from 'react-responsive'

但是有一个像此链接中提到的水合错误（Hydration failed with React-responsivegeneratediv）

显然我需要做这样的事情，我该如何解决它？通过禁用 ssr

import dynamic from "next/dynamic"
const MediaQuery = dynamic(() => import("react-responsive"), {
  ssr: false
})

Answer 1

next/dynamic 对我不起作用，也许尝试将 @artsy/fresnel （SSR 支持）与 next.js 一起使用。

当您在 next.js 中使用嵌套 css 选择器时，它确实需要一些额外的工作，因为 @artsy/fresnel 库会插入 div 包装器及其组件。