5 Tips for integrating Next.js with Storybook

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 https://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 https://learnstorybook.com/
Storybook addons at https://storybook.js.org/addons
Component driven UI development at https://www.componentdriven.org/

▬ Free Storybook hosting ▬▬▬▬▬▬▬▬▬▬

Chromatic is made by Storybook maintainers and sets up in just 2 minutes.
Claim free Storybook hosting at https://www.chromatic.com/!

▬ Follow us! ▬▬▬▬▬▬▬▬▬▬

Instagram:   / storybookjs  
Twitter:   / storybookjs  
Discord:   / discord  
GitHub: https://github.com/storybookjs/storybook

Follow ‪@chantastic‬ on:
twitter:   / chantastic  
youtube: ‪@chantastic‬