Setup Storybook with Nextjs

Photo by La-Rel Easter on Unsplash

Here’s how to integrate storybook to an existing nextjs app. If you don’t have nextjs app yet, run this command:

npx create-next-app@latest

then, run this command to add storybook to your nextjs app

npx storybook@next init

after it finished, you'll have new stories folder within root directory. All stories will be stored within that folder. It is encouraged to add new script to package.json to start storybook development server. Mine would be like this

"sb": "storybook dev"

Next step is to include global styles into .storybook/preview.ts file

We need to import the style because if not, our component will be plain and have no style. If your component using some static file like image/svg from public directory, we also need to set this up in .storybook/main.ts because if not, the image within the component will not render properly. Set it up like below

Finally, run yarn sb to start storybook dev server, it should run on port 60060 on your local server. That’s it, pretty much setting to get started with storybook with nextjs app, thank you for reading.