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 create a story for a Next.js page. Pages are components. So we can easily document and test them in Storybook.

Michael Chan: [0:00] With Storybook, we can test full Next.js pages. Here we have the home page that comes with our Next.js starter. Below it, on the file system, is our stories directory. Let's create a new story for this whole home page. We go into our stories directory and create a new file. For organization purposes, I'll put this inside of a pages directory, and title the file home.stories.jsx.

[0:25] With that file in place, we have to do only a couple things -- import React, import our Home page from the pages directory. We'll need to back out of pages, back out of stories, go into the pages directory and grab index.

[0:42] We then export default with the title. This will control where the story lives. We'll create a new top-level Pages twirl down, and inside of it, Home, and provide the component that we are writing stories for, Home.

[0:59] Finally, we need to provide at least one story. We do that with this syntax export const home page, which is the name of our story. Then an arrow func, rendering home as a JSX component.

[1:16] Hit Save and go over to Storybook. Refresh. We see a new pages twirl down here with our stories inside of it. As you can see, we see that full Next.js home page right here.

Course

Integrate Storybook in a Next.js Application

Create Stories for Next.js Pages

Share this video with your friends