🔑 Key Learning Outcomes

Integrate Storybook 6.3 with Next.js 11.
Turn a default Next.js page into a Story.
Use Story Args to add controls to Next.js page props.
Configure the next/image component to be unoptimized.
Mock server workers with MSW inside Storybook.

👨‍🏫 About the Course

This course teaches you how to integrate Storybook 6.3 with Next.js 11 to build UIs seamlessly. You will learn to turn a default Next.js page into a Story, configure components, and mock server workers for efficient UI development.

🎯 Target Audience

Developers familiar with Next.js looking to enhance UI development skills.

✅ Requirements

Basic knowledge of Next.js.
Understanding of UI development concepts.

📖 Course Content

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.

Update Course