Setup Storybook in NextJs app

Today I need to setup storybook in the NextJs app and I faced a few challenges.

2 challenges

1. import fonts file from the public/fonts folder properly

• staticDirs: ["../public"]

2. make component level css style working

The current project is combined tailwind classes and custom css file which imported in the component level. When I first setup the storybook, it didn’t pick up the component level css styling, until I included this in the addons array in main.js

• npm install --save-dev storybook-css-modules-preset
• add to the addons array

This is the final .storybook/main.js

Reference

Component-level css not loading into stories · Issue #12144 · storybookjs/storybook