Next.js의 Link 및 Storybook에서 나오는 Cannot read property 'prefetch' of null 오류 해결

Next.js의 링크를 스토리 북에서 사용하려고하면,
Cannot read property 'prefetch' of null
라는 오류가 된다.

이것의 대상법에 대해서입니다.

화면은 이런 느낌입니다.

환경

$ node -v
v14.11.0

$ npm -v 
6.14.8

$ npm list --depth=0 ※関係ありそうなやつのみ抜粋
├── @storybook/[email protected]
├── [email protected]

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;

또 다른 해결책은 storybook의 환경 변수를 이용하는 패턴입니다.process.env.STORYBOOK 는 storybook에서 움직일 때 true 입니다.
이것을 이용해 storybook에서 움직이고 있는 경우에만 false 로 하는 방법입니다.

마지막으로

처음 보았을 때는 뭐야 이거? 라고 생각했으므로, 같은 문제에 막혀 있는 사람의 도움이 되면 다행입니다.

참고

htps : // 기주 b. 이 m/ゔぇr세 l/네 xt. js/이스에 s/19825
htps : // 기주 b. m / s와 ryboo kjs / s와 ryboo k / pul / 12997
htps // // 네 xtjs. 오 rg / ds cs / api-refurense / 네 xt / k