Integrate Storybook into Your Development Environment

[00:00] Now let's learn how to get storybook installed into a project of your own. Here I have a Next JS app that I just set up. We can add storybook by opening a new terminal and running the command npx storybook at latest in it. Because we use latest, the storybook in it script will verify that we want to [00:19] install the latest version, which we do. Storybook then detects that we're using a next app and configures all of the correct packages. In addition to that, we can optionally install the ES lint rules, adding them to the ES lint rules inside of our Next JS app. And just like that, everything is installed. We can run yarn [00:39] storybook ourselves, but it gets run by default after running this init command. I still have the other storybook running, so I'm gonna hit yes saying port 6,007 is totally okay with me. Then simple as that we can just go to local host port 6,007 this time. And here we are, our storybook. Now let me show you a couple things real quick before we move [00:59] on. This project was initialized with typescript. So all of the modules inside of this storybook are typescript. This includes all the stories as well. So if we open up the buttons stories, we'll see that all of these have typescript notations, which is very very cool. That means that if you're a typescript user, you'll [01:19] be able to see examples for everything that we covered utilizing typescript. Now that's not all. There's an incredible blog post by my coworker Kyle Gatch that describes all of the configuration that you get for free from this Next integration. Help with routing, image optimization, absolute imports, styling, [01:39] all kinds of things just right out of the box with next steps. And it's not just next steps, there are a ton of modern frameworks that Storybook offers built in support for.