HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🧐
Sonny /
Storybook에서 next/image, public 경로 설정하기
Storybook에서 next/image, public 경로 설정하기
Storybook에서 next/image, public 경로 설정하기

Storybook에서 next/image, public 경로 설정하기

태그
Next.js
Storybook
Config
작성일
Aug 23, 2022
Velog

관련 PR

config: Next image storybook 추가 설정, Avatar icon alias 설정

문제 상황

notion image
  • storybook에서 public 경로를 받아아오지 못하는 상황
  • storybook에서 next/image 컴포넌트를 사용 불가

해결 방법

  • package.json의 storybook 명령어 수정
  • .storybook/preview.js에서 next/image 컴포넌트를 사용할 수 있도록 정의
// package.json
// ...
"storybook": "start-storybook -s public -p 6006"
import * as NextImage from "next/image";

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