5 Tips for integrating Next.js with Storybook

[@chromaticui]

Hey everyone, it's 2023 now and Storybook has a zero-config integration with Next.js which automates a lot of these steps. Learn more storybook.js.org/blog/integrate-nextjs-and-storybook-automatically/

[@ron-almog]

true. (2024). but I find that importing globals.css is still needed.

[@evebella3118]

as a beginner in stories topic, I like the beautiful presentation style - however please for future videos let us see more time the code and less time the speaker (or even a small avatar instead) - better than to pause and rewind the video :) thanks for supporting us to learn !

[@Yannbf]

Awesome stuff! Thanks for sharing these valuable tips!

[@davebeazer]

Great video - thanks!

[@chromaticui]

Thanks D B! Glad you liked it!

[@fxmdr82]

Greate content, you should explain in project with typescript too! Thanks

[@chromaticui]

Great suggestion! With the release of Storybook 7 (a little over a year after this video), we've started using TypeScript examples by default!

[@chromaticui]

There were a few APIs in Storybook 6 that were very cumbersome without TS 4.9's `satisfies` feature.

[@hendridgonzalez1765]

Great... I going to apply this features in my work, in fact I already working in a Spy card to implement, but I feel nerves for the migration to existing app

[@chantastic]

that's awesome! thanks for letting us know. if you haven't, check out our new framework integration. it takes so much of the manual work out of the process! storybook.js.org/blog/integrate-nextjs-and-storybook-automatically/

[@samroehrich684]

Hey! Can we get that link for unoptimizing next image??

[@chromaticui]

nextjs.org/docs/api-reference/next/image

[@LumbreraEnMiCamino]

I Got this error: unknown option '--builder', when i try to install npx sb init --builder webpack5. Anybody can help me?

[@chromaticui]

that's peculiar! we have this article on using the webpack5 builder. it might help. but let us know if you continue to have a problem: storybook.js.org/blog/storybook-for-webpack-5/

[@dazecm]

You sure you're using double dash on your command line?

[@tribaldeni]

I have files and different folders in my public folder, Storybook isn't getting the images there

[@chantastic]

We have a more recent post on Storybook-Next.js integration that should prove helpful. Everything in this video (plus Routing and more) has been put into an addon that is now maintained with Next.js releases. storybook.js.org/blog/integrate-nextjs-and-storybook-automatically/

[@IThinkYouKnowMe]

​@@chantastic Hey in NextJS-14 I have local fonts in public/fonts folder But the Storybook v7+ is not applying these local fonts to stories. How to solve this ?

[@HowTosandTips]

How can I use components that use Links in NextJS? I can't get it to work

[@chromaticui]

You may find this StackOverflow article helpful! stackoverflow.com/questions/59712474/set-up-storybook-to-work-with-next-jss-link-tag

[@thefreelancersite]

I have tried this but not working in systems

[@chantastic]

We have a more recent post on Storybook-Next.js integration that should prove helpful. Everything in this video (plus Routing and more) has been put into an addon that is now maintained with Next.js releases. storybook.js.org/blog/integrate-nextjs-and-storybook-automatically/