storybook 7.0.26 부터 next.js의 NextImage 지원

 

기존에는 Next.js에서 storybook사용시 NextImage적용된 컴포넌트를 스토리북에서 띄울려면 아래와 같은 작업을 해야만했습니다

 

import * as NextImage from 'next/image';

const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, 'default', {
  configurable: true,
  value: (props) => (
    <OriginalNextImage
      {...props}
      unoptimized
      blurDataURL='Blur image URL or Data URL'
    />
  ),
});

 

이제 storybook 7.0.26 부터  위 Object.defineProperty 코드를 넣을 시 

중복 default가 있다고 하면서 오류를 낼 것입니다.

 

기본적으로 storybook에 포함되어 있기 때문에 이제 위 코드는 지워주셔야 합니다.

 

앞으로 Next.js 와 storybook의 호환성이 더 좋아질 거으로 생각되네요

 

 

더 많은 storybook의 업데이트를 보고싶다면 아래 URL을 클릭해주세요
https://github.com/storybookjs/storybook/releases

Releases · storybookjs/storybook

 

 

 

감사합니다