How do I use useMediaQuery only on the client when using NextJS?

[turtletongue]

I am using NextJS and have encountered an error.

When I removed useMediaQuery from the page, the error disappeared. How can I use this hook only on the client if it can't be placed in useEffect?

[turtletongue]

I have solved this problem!! With the help of next/dynamic and { ssr: false }

[mercurymirror]

It doesn't work for me. I have some typing issues

[turtletongue]

@mercurymirror can you tell me more about these issues?

[mercurymirror]

When using dynamic import for useMediaQuery I got a Typescript error :
Cannot call this expression.
All constituents of type 'ComponentType<{}>' cannot be called.
Type 'ComponentClass<{}, any>' has no call signature.

[turtletongue]

@mercurymirror you don't need to use dynamic for useMediaQuery. To solve this problem I used dynamic import for component where useMediaQuery was called.

example-component.tsx

import { useMediaQuery } from '@chakra-ui/react';

const ExampleComponent = () => {
    const [isLessThan800] = useMediaQuery("(max-width: 800px)");

    ...
};

page.tsx

import dynamic from 'next/dynamic';

const ExampleComponent = dynamic(
  () => import('./example-component'),
  { ssr: false }
);

...

But I don't think now that using useMediaQuery is a good idea with NextJS. I think it's better to use Chakra layouts such as flex and grid to make your website responsive because you'll have advantages of server side rendering.