title: next/router: Cannot read property 'pathname' of null (storybook)
body: <p>I have an app which uses Next.js and MaterialUI. In order for Link component to work properly with MaterialUI I have a special <code>Link</code> component that looks like this:</p>
  
  <pre><code>function Link(props) {
    const {
      href,
      activeClassName = 'active',
      className: classNameProps,
      innerRef,
      naked,
      prefetch,
      ...other
    } = props;
  
    const router = useRouter();
    const pathname = typeof href === 'string' ? href : href.pathname;
    const className = clsx(classNameProps, {
      [activeClassName]: router.pathname === pathname &amp;&amp; activeClassName
    });
  
    if (naked) {
      return (
        &lt;NextComposed
          className={className}
          ref={innerRef}
          href={href}
          prefetch={prefetch}
          {...other}
        /&gt;
      );
    }
  
    return (
      &lt;MuiLink component={NextComposed} className={className} ref={innerRef} href={href} {...other} /&gt;
    );
  }
  </code></pre>
  
  <p>This works absolutely fine when I need it. However, when I start adding my components (with this Link) to Storybook, I get an error:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'pathname' of null
          at Link 
  </code></pre>
  
  <p>The example of Link usage in a component that I add to Storybook:</p>
  
  <pre><code>const MyComponent = (props) =&gt; (&lt;Button
                      className={classes.loginButton}
                      disableRipple
                      edge="end"
                      variant="contained"
                      color="secondary"
                      component={Link}
                      naked
                      href="/login"
                    &gt;
                      Login
                    &lt;/Button&gt;)
  </code></pre>
  
  <p>When I try to console.log() router, I do get null which is weird.
  What am I doing wrong here?</p>