Кастомный хук для работы с шириной экрана

Для того чтобы пофиксить window is not defined в next.js можно воспользоваться кастомным хуком:

import { useState, useCallback, useEffect } from 'react';

const useMediaQuery = (width) => {
  const [targetReached, setTargetReached] = useState(false);

  const updateTarget = useCallback((e) => {
    if (e.matches) {
      setTargetReached(true);
    } else {
      setTargetReached(false);
    }
  }, []);

  useEffect(() => {
    const media = window.matchMedia(`(max-width: ${width}px)`);
    media.addEventListener('change', (e) => updateTarget(e));

    if (media.matches) {
      setTargetReached(true);
    }

    return () => media.removeEventListener('change', (e) => updateTarget(e));
  }, []);

  return targetReached;
};

export default useMediaQuery;

Компонент header:

import useMediaQuery from '../../hooks/useMediaQuery';
import MobileMenu from '../mobile-menu/mobile-menu';
import HeaderNav from './header-nav';

function Header() {
  const isBreakpoint = useMediaQuery(768);

  return (
    <header>
      {isBreakpoint ? <MobileMenu /> : <HeaderNav />}
    </header>
  );
}

export default Header;