[BUG] `Storybook` 빌드시 `Next` 빌트인 관련 컴포넌트 관련 오류

[cobocho]

Bug

현재 저희 프로젝트의 경우는 workshop 패키지에서 모든 패키지의 .stories.tsx를 모아 한번에 스토리북을 빌드하고 있습니다. workshop 패키지는 vite를 기반으로 빌드되기 때문에 단순한 서버 컴포넌트 자체는 빌드시 문제가 되지 않지만 일부 Next 내장 컴포넌트나 기능을 사용시 빌드가 깨지는 현상이 존재합니다.

현재 발견한 케이스로는 next/link의 <Link> 컴포넌트 사용시 prefetch와 관련하여 문제가 발생합니다. <Link>의 prefetch는 디폴트가 true이기 때문에 현재는 내부에서 스토리북인지 판별하여 prefetch 여부를 결정하고 있습니다.

EXAMPLE

const isStorybook = process.env.IS_STORYBOOK !== undefined

// ...

<Link prefetch={!isStorybook} href="/">
  <Text type="body-2" color="label-alternative">
    건너뛰기
  </Text>
</Link>

Solution you'd like

일단은 빌드 과정에서 컨트롤 할 수 있는지 확인해 보고 아니면 <Link> 컴포넌트를 래핑하여 사용하는 것도 한가지 방법일 것 같습니다.

Additional Comment

추가로 스토리북 빌드 에러가 발생하는 지점이 있다면 코멘트 남겨주세요!

References