Next.jsのLinkとStorybookで出るCannot read property 'prefetch' of nullエラーの対処

Next.jsのLinkをStorybookで使おうとすると、

Cannot read property 'prefetch' of null

というエラーになる。

これの対象法についてです。

画面はこんな感じです。

環境

$ node -v
v14.11.0

$ npm -v 
6.14.8

$ npm list --depth=0 ※関係ありそうなやつのみ抜粋
├── @storybook/react@6.1.3
├── next@10.0.2

prefetchとは

プリフェッチというのは、利用が予想されるものを読み込んでおくことです。
Next.jsのLinkコンポーネントではデフォルトでリンク先のページのコードをバックグラウンドで読み込むことで、素早いページ遷移を実現しています。

解決方法1

LinkSample.tsx

import React, { VFC } from "react";
import Link from "next/link";

const LinkSample: VFC = () => {
  return (
    <Link href={"/"} prefetch={false}>
      <span>サンプル</span>
    </Link>
  );
};

export default LinkSample;

prefetchはデフォルトだとtrueになっているのですが、不要であればfalseにしてしまうことで解決できます。

解決方法2

LinkSample.tsx

import React, { VFC } from "react";
import Link from "next/link";

const LinkSample: VFC = () => {
  return (
    <Link href={"/"} prefetch={!process.env.STORYBOOK}>
      <span>サンプル</span>
    </Link>
  );
};

export default LinkSample;

もう1つの解決方法はstorybookの環境変数を利用するパターンです。
process.env.STORYBOOKはstorybookで動かしている場合にtrueになります。
これを利用して、storybookで動かしている場合のみにfalseにする方法です。

最後に

最初に見た時は、なんだこれ？と思ったので、同じような問題に詰まっている人の助けになれば幸いです。

参考

https://github.com/vercel/next.js/issues/19825
https://github.com/storybookjs/storybook/pull/12997
https://nextjs.org/docs/api-reference/next/link