Integrate Storybook in a Next.js Application

Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force specific data into your database.
In this course, Michael Chan will teach you how to integrate Storybook 6.3 with Next.js 11 so that you can flawlessly build UIs.
The course will kick off by taking the default Next.js page and turning it into a Story. You will then learn how to leverage Story Args, configure the next/image component to be unoptimized, and mock server workers with MSW inside Storybook.

• Initialize Storybook in a Next.js Project with Webpack 5 Builder
• Create Stories for Next.js Pages
• Import Global Stylesheets for all Stories in preview.js
• Add Controls to Next.js Page Props with Story Args
• Configure next/image Component to be Unoptimized
• Integrate MSW and Storybook
• Mock getServerSideProps and getStaticProps Request with MSW and Storybook Loaders