Set up Storybook to work with Next.js's Link tag

Question

I'm trying to set up Storybook for a Next.js project. I have a component that render the Link tag from Next.js. My problem is that when I load this component, Storybook throws the following error:

Cannot read property 'pageLoader' of null
   at Link.handleRef

What does one have to do to get Storybook working with Next.js Routing, specifically rendering the Link tag?

Update: Code that causes the error:

// button-component.js
import Link from 'next/link.js';
import t from 'prop-types';
import React from 'react';

function Button({ as, children, href, ...props }) {
  const isExternal = href && href.startsWith('http');
  const a = (
    <a href={href} {...props}>
      {children}
    </a>
  );

  if (href) {
    return isExternal ? (
      a
    ) : (
      <Link href={href} as={as}>
        {a}
      </Link>
    );
  }

  return (
    <button type="button" {...props}>
      {children}
    </button>
  );
}

Button.propTypes = {
  as: t.string,
  children: t.node,
  href: t.string,
};

export default React.memo(Button);

// button.stories.js
import React from 'react';

import Button from './button-component';

export default {
  title: 'Button',
};

export const standardButton = () => <Button>Standard Button</Button>;

export const internalLink = () => <Button href='/buy'>
  Internal Link
</Button>;

export const externalLink = () => (
  <Button target="_blank" href="https://www.hopin.to">
    External Link
  </Button>
);

Answer 1

I found an issue reported about this on Next.js's github: https://github.com/zeit/next.js/issues/9951

It was reported only 5 days ago, so you could be having the same issue. The resolution is to upgrade to nextjs v9.1.8-canary.6. Reading more about this and looking at the source code, this is likely your problem. Also, there are more recent canary builds of nextjs, if you want to try something newer.

If that doesn't resolve it, my other guess is that you're getting errors because you're using Link outside of a Next.js page. Next.js may include dependencies for pages, behind the scenes. Link may rely on those dependencies and is throwing an error when they aren't found. If you want to test your components outside of Next.js pages, you could create a custom Link component that tests whether you're in Next.js and only renders Link if you are. For example:

import Link from 'next/link'
import Router from 'next/router'

const CustomLink = ({children, ...otherProps}) => {
  const isPage = () => {
    // if we're in a next.js route, then Router.router will be set
    return Boolean(Router.router)
  }

  return isPage()
    ? (<Link {...otherProps}>{children}</Link>)
    : children
}

Then use CustomLink instead of Link.