Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force specific data into your database.

In this course, Michael Chan will teach you how to integrate Storybook 6.3 with Next.js 11 so that you can flawlessly build UIs. 

The course will kick off by taking the default Next.js page and turning it into a Story. You will then learn how to leverage Story `Args`, configure the `next/image` component to be unoptimized, and mock server workers with MSW inside Storybook.

In this lesson, we set up a new Storybook inside a Next.js project using the `sb init` script. For maximum compatibility with Next.js, we specify the Webpack 5 builder. Finally, we run our setup with `yarn storybook`.

Initialize Storybook in a Next.js Project with Webpack 5 Builder

In this lesson, we create a story for a Next.js page. Pages are components. So we can easily document and test them in Storybook.

Create Stories for Next.js Pages

In this lesson, we configure Storybook to load global stylesheets for all stories. This is a great way to get general CSS into all stories and useful practice for adding resets, fonts, and globally shared stylesheets.

Import Global Stylesheets for all Stories in preview.js

In this lesson, we add Storybook controls to page stories using Storybook args. With args, stories can be manipulated and transformed in the browser. Additionally, we configure all stories in a module to use default args.

Add Controls to Next.js Page Props with Story Args

In this lesson, we configure `next/image` for use in Storybook. `next/image` is a Next.js component that creates highly performance-optimized images to users based on device capability and browser dimensions. It can be unoptimized for compatibility in development environments like Storybook.

Configure next/image Component to be Unoptimized

In this lesson, we add the Mock Service Worker (MSW) library to Storybook for API endpoint mocking in Storybook. We configure MSW by hand for use with Next.js features like `getServerSideProps` and `getStaticProps` in stories.

Integrate MSW and Storybook

In this lesson, we include the `getServerSideProps` and `getStaticProps` exports into a story, using Storybook loaders. We mock the fetch request using MSW.

Integrate Storybook in a Next.js Application

Instructor

Course Content