ReferenceError: окно не определено w / useMedia () hook + next. js

Question

Поскольку я использую следующее. js Я думаю, что получаю ошибку "окно не определено" из-за выполнения кода на стороне сервера, а не на клиенте. Я пытался использовать useLayoutEffect (), чтобы дождаться отображения страницы, но она все равно не работала. Могу ли я что-нибудь сделать, чтобы изменить пользовательский хук useMedia () ниже, чтобы решить эту проблему?

export default (queries, values, defaultValue) => {
  const mediaQueryLists = queries.map(q => window.matchMedia(q));

  const getValue = () => {
    const index = mediaQueryLists.findIndex(mql => mql.matches);

    return typeof values[index] !== "undefined" ? values[index] : defaultValue;
  };

  const [value, setValue] = useState(getValue);
  useEffect(() => {
    const handler = () => setValue(getValue);

    mediaQueryLists.forEach(mql => mql.addListener(handler));

    return () => mediaQueryLists.forEach(mql => mql.removeListener(handler));
  }, []);

  return value;
};

Answer 1

Поскольку окно не монтируется вовремя, попробуйте дождаться его, используя:

let mediaQueryLists
if (typeof window !== 'undefined') {
  mediaQueryLists = queries.map(q => window.matchMedia(q));
} else {
  mediaQueryLists = []
}