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

Create Stories for Next.js Pages

Import Global Stylesheets for all Stories in preview.js

Add Controls to Next.js Page Props with Story Args

Configure next/image Component to be Unoptimized

Integrate MSW and Storybook

Mock getServerSideProps and getStaticProps Request with MSW and Storybook Loaders

Integrate Storybook in a Next.js Application

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`.

Michael Chan: [0:00] We can initialize Storybook into a Next.js project using the sbinit command. We use npx, which will download the latest version of the installer and run it, sb, for Storybook, and init. This command will initialize Storybook into this project with the latest version of Storybook available.

[0:20] Next.js versions 11 and later use Webpack 5. To initialize Storybook with Webpack 5, we need to tell it what builder to use. We'll use the builder option for that, with the value webpack5. Hit Enter, and all the dependencies will start installing. This is sped up, so you don't have to sit through the whole thing.

[0:42] Now that everything is installed, we can run the yarn storybook command. If you're using npm, use npm run storybook, and hit Enter. Give it a second to build our Storybook. It'll automatically open in our favorite browser.

Course

Integrate Storybook in a Next.js Application

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

Share this video with your friends