Create Stories for Next.js Pages
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.