5 Tips for integrating Next.js with Storybook

Подписаться 7 тыс.

Просмотров 23 тыс.

50% 1

Don't get stuck setting up Storybook in Next.js! In this video, Michael Chan (@chantastic) helps you start your Storybook and Next.js integration on the right foot with 5 quick tips.
▬ 2023 zero-config update ▬▬▬▬▬▬▬▬▬▬
As of 2023, Storybook has a zero-config integration with Next.js. Learn more storybook.js.org/blog/integra...
▬ 5 Tips for Storybook and Next.js ▬▬▬▬▬▬▬▬▬▬
0:00 Intro
1:24 1. Use the Webpack 5 Builder
5:23 2. Create Stories for Next.js Pages
8:49 3. Load Global Stylesheets in /.storybook/preview.js
11:35 4. De-optimize next/image
16:30 5. Mock Data for getServerSideProps and getStaticProps with MSW
26:11 Outro
▬ Learn more ▬▬▬▬▬▬▬▬▬▬
- Storybook at learnstorybook.com/
- Storybook addons at storybook.js.org/addons
- Component driven UI development at www.componentdriven.org/
▬ Free Storybook hosting ▬▬▬▬▬▬▬▬▬▬
Chromatic is made by Storybook maintainers and sets up in just 2 minutes.
Claim free Storybook hosting at www.chromatic.com/!
▬ Follow us! ▬▬▬▬▬▬▬▬▬▬
Instagram: / storybookjs
Twitter: / storybookjs
Discord: / discord
GitHub: github.com/storybookjs/storybook
Follow ‪@chantastic‬ on:
- twitter: / chantastic
- youtube: ‪@chantastic‬

Опубликовано:

28 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 23

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

@Yannbf 2 года назад

Awesome stuff! Thanks for sharing these valuable tips!

@davebeazer 2 года назад

Great video - thanks!

@chromaticui 2 года назад

Thanks D B! Glad you liked it!

@evebella3118 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 !

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

@fxmdr82 9 месяцев назад

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

@chromaticui 9 месяцев назад

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 9 месяцев назад

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

@samroehrich684 2 года назад

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

@chromaticui 2 года назад

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

@HowTosandTips 2 года назад

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

@chromaticui 2 года назад

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

@LumbreraEnMiCamino 2 года назад

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

@chromaticui 2 года назад

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?

@juicio_den Год назад

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 8 месяцев назад

@@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 ?