Initialize Storybook in a Next.js Project with Webpack 5 Builder
In this lesson, we set up a new Storybook inside a Next.js project using the sb init script. For maximum compatibility with Next.js, we specify the Webpack 5 builder. Finally, we run our setup with yarn storybook.
Michael Chan: [0:00] We can initialize Storybook into a Next.js project using the sbinit command. We use npx, which will download the latest version of the installer and run it, sb, for Storybook, and init. This command will initialize Storybook into this project with the latest version of Storybook available.
[0:20] Next.js versions 11 and later use Webpack 5. To initialize Storybook with Webpack 5, we need to tell it what builder to use. We'll use the builder option for that, with the value webpack5. Hit Enter, and all the dependencies will start installing. This is sped up, so you don't have to sit through the whole thing.
[0:42] Now that everything is installed, we can run the yarn storybook command. If you're using npm, use npm run storybook, and hit Enter. Give it a second to build our Storybook. It'll automatically open in our favorite browser.