Error: invariant expected app router to be mounted [Route 컴포넌트 개발하기, tailwind 적용] ( with. Story Book )

뒤로가기 소제목 컴포넌트 개발을 하려는 중이다

next 앱라우팅 환경이고 useRouter()를 이용한 동적라우팅 방식을 사용하였다.

개발 후 스토리북에 업로드 하려하자 이런 오류가 난다. 🤮

Error: invariant expected app router to be mounted

공식문서에서 제시한 해결책을 알아보자

https://storybook.js.org/docs/get-started/frameworks/nextjs

Next.js 프로젝트가 app모든 페이지에 디렉토리를 사용하는 경우(즉, 디렉토리가 없는 경우 ), 파일에서 매개 pages변수를 설정하여 모든 스토리에 적용할 수 있습니다. nextjs.appDirectorytrue.storybook/preview.js|ts

Sol ⭐️ appDirectory:true 를 추가하니 해결됐다.

Storybook에 tailwind가 적용되지 않은 모습이다.

Sol ⭐️ storybook/preview.ts에 밑에 해당 코드를 작성 하면 끝이다 !!!

import '../src/app/style/globals.css';