title: NextJS error message Failed prop type: The prop `href` expects a `string` or `object` in `<Link>`, but got `undefined` instead
body: <p>I'm try implementing a header of Layout in my project</p>
  <p>&quot;Error: Failed prop type: The prop <code>href</code> expects a <code>string</code> or <code>object</code> in <code>&lt;Link&gt;</code>, but got <code>undefined</code> instead.
  Open your browser's console to view the Component stack trace.&quot;
  Can you guide me on what I'm doing wrong?</p>
  <pre><code>import {
    Box,
    Button,
    Divider,
    List,
    ListItem,
    ListItemText,
    Menu,
    MenuItem
  } from '@material-ui/core';
  import { useRef, useState } from 'react';
  import { useTranslation } from 'react-i18next';
  
  import Link from 'next/link';
  import { styled } from '@material-ui/core/styles';
  import ExpandMoreTwoToneIcon from '@material-ui/icons/ExpandMoreTwoTone';
  
  const ListWrapper = styled(Box)(
    ({ theme }) =&gt; `
          .MuiTouchRipple-root {
              display: none;
          }
          
          .MuiListItem-root {
              transition: ${theme.transitions.create(['color', 'fill'])};
              
              &amp;.MuiListItem-indicators {
                  padding: ${theme.spacing(1, 2)};
              
                  .MuiListItemText-root {
                      .MuiTypography-root {
                          &amp;:before {
                              height: 4px;
                              width: 22px;
                              opacity: 0;
                              visibility: hidden;
                              display: block;
                              position: absolute;
                              bottom: -10px;
                              transition: all .2s;
                              border-radius: ${theme.general.borderRadiusLg};
                              content: &quot;&quot;;
                              background: ${theme.colors.primary.main};
                          }
                      }
                  }
  
                  &amp;.active,
                  &amp;:active,
                  &amp;:hover {
                  
                      background: transparent;
                  
                      .MuiListItemText-root {
                          .MuiTypography-root {
                              &amp;:before {
                                  opacity: 1;
                                  visibility: visible;
                                  bottom: 0px;
                              }
                          }
                      }
                  }
              }
          }
  `
  );
  
  function HeaderMenu() {
    const { t } = useTranslation();
  
    const ref = useRef(null);
    const [isOpen, setOpen] = useState(false);
  
    const handleOpen = () =&gt; {
      setOpen(true);
    };
  
    const handleClose = () =&gt; {
      setOpen(false);
    };
  
    return (
      &lt;&gt;
        &lt;ListWrapper&gt;
          &lt;List component={Box} display=&quot;flex&quot;&gt;
            &lt;ListItem
              classes={{ root: 'MuiListItem-indicators' }}
              button
              component={Link}
              to=&quot;/preview/management/users/list&quot;
            &gt;
              &lt;ListItemText
                primaryTypographyProps={{ noWrap: true }}
                primary={t('Users')}
              /&gt;
            &lt;/ListItem&gt;
            &lt;ListItem
              classes={{ root: 'MuiListItem-indicators' }}
              button
              component={Link}
              to=&quot;/preview/dashboards/banking&quot;
            &gt;
              &lt;ListItemText
                primaryTypographyProps={{ noWrap: true }}
                primary={t('Banking')}
              /&gt;
            &lt;/ListItem&gt;
            &lt;ListItem
              classes={{ root: 'MuiListItem-indicators' }}
              button
              ref={ref}
              onClick={handleOpen}
            &gt;
              &lt;ListItemText
                primaryTypographyProps={{ noWrap: true }}
                primary={
                  &lt;Box display=&quot;flex&quot; alignItems=&quot;center&quot;&gt;
                    {t('Help')}
                    &lt;Box display=&quot;flex&quot; alignItems=&quot;center&quot; pl={0.3}&gt;
                      &lt;ExpandMoreTwoToneIcon fontSize=&quot;small&quot; /&gt;
                    &lt;/Box&gt;
                  &lt;/Box&gt;
                }
              /&gt;
            &lt;/ListItem&gt;
          &lt;/List&gt;
        &lt;/ListWrapper&gt;
        &lt;Menu anchorEl={ref.current} onClose={handleClose} open={isOpen}&gt;
          &lt;MenuItem component={Link} to=&quot;/overview&quot;&gt;
            {t('Features tour')}
          &lt;/MenuItem&gt;
          &lt;MenuItem component={Link} to=&quot;/docs/introduction&quot;&gt;
            {t('Getting started guide')}
          &lt;/MenuItem&gt;
          &lt;MenuItem component={Link} to=&quot;/docs/contact-support&quot;&gt;
            {t('Contact support')}
          &lt;/MenuItem&gt;
          &lt;Divider sx={{ my: 1.5 }} /&gt;
          &lt;Button
            variant=&quot;contained&quot;
            fullWidth
            href=&quot;https://material-ui.com/store/items/tokyo-react-admin-dashboard&quot;
            target=&quot;_blank&quot;
            rel=&quot;noopener&quot;
          &gt;
            {t('Buy now')}
          &lt;/Button&gt;
        &lt;/Menu&gt;
      &lt;/&gt;
    );
  }
  
  export default HeaderMenu;
  
  
  
  
  
  </code></pre>