It is recommended to separate your client component from your server component in the app directory.

By default, a page is a server component.

From what I see in your code, you have opted for "use client", but it would be best for you to create a separate component that includes this code.

By the way, the issue lies within your useMediaQuery hook. I cannot see the code, but I believe it is not SSR-friendly.

Here is an implementation of the useMediaQuery hook:

import { useState } from 'react'
import { useIsomorphicLayoutEffect } from 'usehooks-ts'

type UseMediaQueryOptions = {
  defaultValue?: boolean
  initializeWithValue?: boolean
}

const IS_SERVER = typeof window === 'undefined';

export function useMediaQuery(
  query: string,
  {
    defaultValue = false,
    initializeWithValue = true,
  }: UseMediaQueryOptions = {},
): boolean {
  const getMatches = (query: string): boolean => {
    if (IS_SERVER) {
      return defaultValue
    }
    return window.matchMedia(query).matches
  }

  const [matches, setMatches] = useState<boolean>(() => {
    if (initializeWithValue) {
      return getMatches(query)
    }
    return defaultValue
  })

  function handleChange() {
    setMatches(getMatches(query))
  }

  useIsomorphicLayoutEffect(() => {
    const matchMedia = window.matchMedia(query)

    handleChange()

    if (matchMedia.addListener) {
      matchMedia.addListener(handleChange)
    } else {
      matchMedia.addEventListener('change', handleChange)
    }

    return () => {
      if (matchMedia.removeListener) {
        matchMedia.removeListener(handleChange)
      } else {
        matchMedia.removeEventListener('change', handleChange)
      }
    }
  }, [query])

  return matches
}

From: https://usehooks-ts.com/react-hook/use-media-query

The hook will not throw any errors.

Note: You do not need to use dynamic import to use hooks. You just need to make the hook SSR-friendly by avoiding the use of window or document before the app is on the client.

I encountered the same problem. This is because useMediaQuery renders both server-side and client-side. Even if you give the “use client” directive, if it somehow works where ssr is, this error occurs.

As a solution, you can create a custom hook and use this hook by dynamic import:

example custom hook:
import useMediaQuery from “@/hooks/useMediaQuery”;

const useDevice = () => {
  const isMobile = useMediaQuery("only screen and (max-width : 767px)");
  const isTablet = useMediaQuery(
    "only screen and (min-width : 768px) and (max-width : 1024px)"
  );
  const isDesktop = useMediaQuery(
    "only screen and (min-width : 1025px) and (max-width : 2379px)"
  );
  const isDesktopLarge = useMediaQuery("only screen and (min-width : 2380px)");

  return { isMobile, isTablet, isDesktop, isDesktopLarge };
};

export default useDevice;

usage:

"use client";
const useDevice = dynamic(() => import("@/app/hooks/useDevice"), {
  ssr: false
});


export default function Header() {
  const device = useDevice();
  console.log(device?.isDesktop)

  ...

}