Disable ssr for useMediaQuery for Next.js

Question

responsive with Next.js 13

I wanna use this the useMediaQuery

import { useMediaQuery } from 'react-responsive'

But there is a hydration error like this mentionned in this link (Hydration failed with react-responsive generate div)

Apparently I need to do something like this, how can I fix it? by disabling ssr

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

Answer 1

next/dynamic doesn't work for me, maybe try using @artsy/fresnel (SSR support) with next.js.

It does require some extra work tho when you use nested css selectors in next.js, because the @artsy/fresnel library inserts div wrappers with their components.