HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
♥️
2기 최종 프로젝트 팀별 공간/
📚
[팀06] Books/
❌
에러 해결 모음/
Next.js에서 stories 폴더 외 stories.tsx를 읽을 수 없는 현상

Next.js에서 stories 폴더 외 stories.tsx를 읽을 수 없는 현상

에러 현상

create-react-app에서는 stories 폴더가 아니라도 Component.stories.jsx 파일을 인식했는데
create-next-app에서는 Component.stories.tsx 파일을 인식하지 못합니다

해결

CRA에서 생성된 storybook의 main.js는 src폴더 하위를 인식하기 때문에 stories 폴더 외에도 Component.stories.jsx를 인식합니다
 
Next.js에서 생성된 storybook의 main.js는 stories 폴더 하위를 인식하기 때문에 components 폴더를 인식하지 못합니다
 
따라서 components 폴더를 인식하도록 기존의 내용에 추가했습니다
 
이후 자동 생성된 Button 등이 담긴 stories 폴더 를 삭제하고 돌려보면
stories 폴더 가 없는데 main.js의 stories 배열 에는 들어 있기 때문에 에러가 나서 지워버렸습니다
최종적으로는 위 코드의 수정 결과 에 해당하는 코드가 되었습니다
 
// create-react-app의 기본 .storybook/main.js
module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
	...
}
// create-next-app의 기본 .storybook/main.js
module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  ...
}

// 수정 결과
module.exports = {
  stories: ["../components/**/*.stories.@(js|jsx|ts|tsx)"],
	...
};