5 Tips for integrating Next.js with Storybook

Поділитися
Вставка
  • Опубліковано 7 січ 2025

КОМЕНТАРІ •

  • @chromaticui
    @chromaticui  Рік тому +3

    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
      @ron-almog 4 місяці тому

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

  • @evebella3118
    @evebella3118 2 роки тому +2

    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
    @Yannbf 3 роки тому

    Awesome stuff! Thanks for sharing these valuable tips!

  • @davebeazer
    @davebeazer 3 роки тому +1

    Great video - thanks!

    • @chromaticui
      @chromaticui  3 роки тому

      Thanks D B! Glad you liked it!

  • @tribaldeni
    @tribaldeni Рік тому

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

    • @chantastic
      @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
      @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
    @HowTosandTips 3 роки тому +1

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

    • @chromaticui
      @chromaticui  3 роки тому +1

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

  • @samroehrich684
    @samroehrich684 2 роки тому +1

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

    • @chromaticui
      @chromaticui  2 роки тому

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

  • @hendridgonzalez1765
    @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
      @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/

  • @fxmdr82
    @fxmdr82 Рік тому

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

    • @chromaticui
      @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
      @chromaticui  Рік тому

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

  • @LumbreraEnMiCamino
    @LumbreraEnMiCamino 3 роки тому

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

    • @chromaticui
      @chromaticui  3 роки тому

      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
      @dazecm Рік тому

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

  • @thefreelancersite
    @thefreelancersite Рік тому

    I have tried this but not working in systems

    • @chantastic
      @chantastic Рік тому +1

      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/