Name: Add Controls to Next.js Page Props with Story Args
Uploaded: 2021-10-22T01:32:27-05:00
Description: 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.

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

https://app.egghead.io/api/v1/lessons/next-js-add-controls-to-next-js-page-props-with-story-args/subtitles

Michael Chan: [0:00] Args are a powerful way to add controls for data that we might change in Storybook components. For example, this component takes a name prop, name="John Doh". Providing the prop directly changes the story, but using args, we'll let anyone viewing this story change this data as well.

[0:21] We achieve this by adding an args property to the home page story. It's an object, just like props, so we use name: "John Dough". We just need to configure our story to take args and spread them out over the component. Now we see name available in Controls, so we can see what this page will look like with different names.

[0:46] Finally, args are composable, so we can provide a default as well -- name: "John Doe". This John Doe will get used if we don't provide any args for the specific story.

Add Controls to Next.js Page Props with Story Args

Share this video with your friends

Course

Integrate Storybook in a Next.js Application