Add Controls to Next.js Page Props with Story Args
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.
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.