Installing Storybook in Next.js 14

Storybook is a powerful tool for developing UI components in isolation, allowing for faster development and easier testing. this articles is just my story when I was installing Storybook into a Next.js 14 project with JS & Tailwind CSS set by default.

Step 1: Setup Next.js 14 Project

Before integrating Storybook, make sure you have a Next.js 14 project set up. If you haven’t already, you can create a new Next.js project using the following command:

# create new project if you haven't :p
npx create-next-app@latest

for this project I named my project as ‘sb-next’ & I use following configuration :

New next.js project configuration that I use

Step 2: Install Storybook

Go to your newly created project and run the following commands in your terminal:

# add storybook to your next.js project
npx storybook@latest init

This command will guide you through the setup process, creating necessary configuration files and installing required dependencies.

off course you need to proceed it, so “Y”

This plugin give eslint functionality to your storybook, so “Y”

After installation success, you’ll be redirected to your local Storybook :

Success notification on your terminal

You can also manually run your Storybook using the following commands :

# if you're using NPM
npm run storybook

# if you're using Yarn
yarn storybook

Tadaa! your Storybook is ready to serve

Anyway, thanks for reading my first article