[Next.js] Storybook next/image 설정

 

storybook에서 next에서 사용하는 Image 컴포넌트를 그대로 사용했더니

404 (Not Found)가 무한 호출되는 현상이 나타났다.

 

✅ 해결 방법

storybook 환경에서는 이미지 최적화를 하지 않도록 설정한다.

// .storybook/preview.js

import * as NextImage from 'next/image';

const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, 'default', {
  configurable: true,
  value: (props) => <OriginalNextImage {...props} unoptimized loader={({ src }) => src} />,
});

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

 

+

 

public에서 이미지를 가져와서 쓰는데 스토리북에서만 이미지를 찾을 수 없는 경우 (not found 뜰 경우)

스토리북이 실행되는 경로를 변경해주어야 한다.

 

//package.json

"storybook": "start-storybook -p 6006 -s ./public",