Integrate Storybook in a Next.js Application

• 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.

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.

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

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

• 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.