title: Next.js - Link does not work in production
body: <p>I use NextJS 9.1.3 and I am generating a navigation in my project using the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { useRouter } from 'next/router';
  import { Menu, Icon } from 'antd';
  import PropTypes from 'prop-types';
  import Link from 'next/link';
  
  const Navigation = () =&gt; {
    const navPoints = [
      {
        id: 0,
        key: '/index',
        icon: 'info',
        title: 'Testpage',
        path: '/',
      },
      {
        id: 1,
        key: '/helloworld',
        icon: 'info',
        title: 'Hello World',
        path: '/helloworld',
      },
    ];
  
    const propTypes = {
      onClick: PropTypes.function,
      href: PropTypes.string,
      icon: PropTypes.string.isRequired,
      title: PropTypes.string.isRequired,
    };
  
    const defaultProps = {
      onClick: Function.prototype,
      href: '',
    };
  
  
    const CustomNavPoint = React.forwardRef(
      ({
        onClick, href, icon, title,
      }, ref) =&gt; (
        &lt;a href={href} onClick={onClick} ref={ref}&gt;
          &lt;Icon type={icon} /&gt;
          {title}
        &lt;/a&gt;
      ),
    );
    CustomNavPoint.propTypes = propTypes;
    CustomNavPoint.defaultProps = defaultProps;
    CustomNavPoint.displayName = 'CustomNavPoint';
  
    const router = useRouter();
    const currentRoute = router.pathname;
    return (
      &lt;Menu
        selectedKeys={[currentRoute === '/' ? '/index' : currentRoute]}
        mode="horizontal"
        overflowedIndicator={&lt;Icon type="bars" /&gt;}
      &gt;
        {navPoints &amp;&amp; navPoints.length
          ? navPoints.map((el) =&gt; (
            &lt;Menu.Item key={el.key} title={el.title}&gt;
              &lt;Link href={el.path} passHref&gt;
                &lt;CustomNavPoint icon={el.icon} href={el.path} title={el.title} /&gt;
              &lt;/Link&gt;
            &lt;/Menu.Item&gt;
          ))
          : null}
      &lt;/Menu&gt;
    );
  };
  export default Navigation;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In development mode it runs perfectly, but if I do:</p>
  
  <pre><code>yarn build
  
  
  yarn export (next export)
  </code></pre>
  
  <p>then the <strong>Links won't work in the production build.</strong></p>
  
  <p>I have read that passHref is important as well as the click function, but the navigation points do not work. </p>
  
  <p>Although the anker tag gets the correct path:</p>
  
  <p><a href="https://i.stack.imgur.com/TBy46.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TBy46.png" alt="HTML of the navpoint"></a></p>
  
  <p>What is the problem with that, can someone help here ?</p>