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

(Experimental) SWC support

If you're working with a Next.js project that already uses SWC (e.g., version 14 or higher), you can enable it in Storybook by adding the following to your main.js:

.storybook/main.js
Loading...

SWC support was introduced in version 7.6, is currently experimental, and may not work for all projects. If you encounter any issues, contact us by opening a discussion on GitHub.

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,622 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI