How to use useMediaQuery with latest Nextjs

[AlexCernik]

Steps to reproduce

page.js

'use client'

const match = useMediaQuery('(max-width:576px)', { noSsr: true });

return (
    <Stack
      component='nav'
      direction='row'
      zIndex={2}
      position='fixed'
      justifyContent='space-between'
      alignItems='center'
      width='100%'
      height={55}
      bgcolor='#0077E6'
      paddingX={2}
      aria-label="Menú principal"
    >
      {!match ?
        <Stack component='ol' direction='row' alignItems='center'>
          <li>
            <Typography
              fontFamily='var(--FW)'
              fontSize={31}
              color='#e6e6e6'
              paddingRight={5}
            >
              G
            </Typography>
          </li>

          {sections.map((item) => (
            <li key={item}>
              <Link
                href={`#${item}`}
                style={{
                  textDecoration: 'none',
                  color: '#ededed',
                  cursor: 'pointer',
                  paddingBlock: 15,
                  paddingInline: 30
                }}
              >
                {item}
              </Link>
            </li>
          ))}
        </Stack>
        :
        <>
          <IconButton onClick={() => toggleDrawer()} style={{ color: '#ededed' }}><IconMenu /></IconButton>
          <Drawer
            anchor='right'
            open={open}
            onClose={() => toggleDrawer()}
            PaperProps={{ sx: { width: 250 } }}
          >
            {sections.map((item) => (
              <Link
                key={item}
                href={`#${item}`}
                style={{
                  textDecoration: 'none',
                  color: 'GrayText',
                  cursor: 'pointer',
                  paddingBlock: 15,
                  paddingInline: 30,
                  marginBlock: 2
                }}
                onClick={() => toggleDrawer()}
              >
                {item}
              </Link>
            ))}
          </Drawer>
        </>
      }
    </Stack>
  );

browser console log

Uncaught Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

  ...
    <RedirectErrorBoundary router={{...}}>
      <InnerLayoutRouter parallelRouterKey="children" url="/glury" tree={[...]} childNodes={Map} segmentPath={[...]} ...>
        <Page>
          <Box className="__variable...">
            <Styled(div) as="div" ref={null} className="__variable..." theme={{...}} sx={{}}>
              <Insertion>
              <div className="__variable...">
                <Menu>
                  <Grid component="nav" direction="row" zIndex={2} position="fixed" justifyContent="space-between" ...>
                    <MuiStack-root as="nav" ownerState={{...}} ref={null} className="MuiStack-root" ...>
                      <Insertion>
                      <nav className="MuiStack-r..." aria-label="Menú princ...">
                        <IconButton onClick={function onClick} style={{color:"#ed..."}}>
                          <MuiIconButton-root className="MuiIconBut..." centerRipple={true} focusRipple={true} ...>
                            <Insertion>
                            <ButtonBase className="MuiIconBut..." centerRipple={true} focusRipple={true} disabled={false} ...>
                              <MuiButtonBase-root as="button" className="MuiButtonB..." ownerState={{...}} ...>
                                <Insertion>
+                               <button
+                                 className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium mui-aixiz9..."
+                                 onBlur={function useEventCallback.useRef}
+                                 onClick={function onClick}
+                                 onContextMenu={function useEventCallback.useRef}
+                                 onFocus={function useEventCallback.useRef}
+                                 onKeyDown={function useEventCallback.useRef}
+                                 onKeyUp={function useEventCallback.useRef}
+                                 onMouseDown={function useEventCallback.useRef}
+                                 onMouseLeave={function useEventCallback.useRef}
+                                 onMouseUp={function useEventCallback.useRef}
+                                 onDragLeave={function useEventCallback.useRef}
+                                 onTouchEnd={function useEventCallback.useRef}
+                                 onTouchMove={function useEventCallback.useRef}
+                                 onTouchStart={function useEventCallback.useRef}
+                                 tabIndex={0}
+                                 type="button"
+                                 disabled={false}
+                                 style={{color:"#ededed"}}
+                                 ref={function useForkRef.useMemo}
+                               >
-                               <ol className="MuiStack-root mui-1d9cypr-MuiStack-root">
                        ...
        ...

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

No response

Search keywords: useMediaQuery, Nextjs

[siriwatknp]

Please provide a reproducible sandbox or a repo that I can take a look.