Integrate Next.js and Storybook
Next.js enables you to create full-stack web applications by extending the latest React features This recipe shows you how to get the most out of Next.js in Storybook.
This recipe assumes that you have a Next >= 12 app. Don’t have this? Follow Next's setup instructions then run:
Set up your project
In a project without Storybook
Follow the prompts after running this command in your Next.js project's root directory:
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:
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:
Update your main.js to change the framework property:
If you were using Storybook plugins to integrate with Next.js, those are no longer necessary when using this framework and can be removed:
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.