Create Stories for Next.js Pages

Michael Chan
InstructorMichael Chan
Share this video with your friends

Social Share Links

Send Tweet
Published 3 years ago
Updated 3 years ago

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.

egghead
egghead
~ a minute ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today