Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Integrate Storybook in a Next.js Application

via egghead.io

Overview

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.

Syllabus

  • 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

Taught by

Michael Chan

Reviews

4.4 rating at egghead.io based on 72 ratings

Start your review of Integrate Storybook in a Next.js Application

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.