New
Storybook 7.6Visual test with Chromatic
Star81,127
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Prerequisites

This recipe assumes that you have a Next >= 12 app. Don’t have this? Follow Next's setup instructions then run:

Terminal
Loading...

Set up your project

In a project without Storybook

Follow the prompts after running this command in your Next.js project's root directory:

Terminal
Loading...

In a project with Storybook

This framework is designed to work with Storybook 7. If you’re not already using v7, upgrade with this command:

Terminal
Loading...

Automatic migration

When running the upgrade command above, you should get a prompt asking you to migrate to @storybook/nextjs, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below.

Manual migration

Install the framework:

Terminal
Loading...

Update your main.js to change the framework property:

.storybook/main.js
Loading...

If you were using Storybook plugins to integrate with Next.js, those are no longer necessary when using this framework and can be removed:

.storybook/main.js
Loading...

Get involved

Now you're ready to use Next.js with Storybook. 🎉 If you use Nextjs at work, we'd love your feedback on the Next + Storybook experience.

Join the maintainers and our thriving community in Discord.

Join the community
6,383 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI