In this article, I will guide you step by step to set up Storybook with Next, Typescript, SCSS, and Jest.

Storybook is an open-source tool for developing UI components in isolation. It makes building stunning UIs organized and efficient. However, it can be quite tricky to set up with Nextjs.

Requirements

• Node.js 10.13 or later
• MacOS, Windows (including WSL), and Linux are supported

Create Nextjs App

Create a new Next.js app using create-next-app, which sets up everything automatically for you. To create a project, run this command:

$ npx create-next-app 
✔ What is your project named? … my-app
✔ Pick a template › Default starter app

• Enter your project name + hit return
• You will be asked to choose a template: Use arrow key ⬇to choose a Default starter app and hit return

After the installation is complete, to start the development server:

cd my-app
yarn run dev

You should see this page on localhost:3000

#typescript #storybook #development #nextjs