How to Set Up Storybook for a Next.js Project
Storybook is a powerful tool for building UI components in isolation. It helps you create and test components without running the whole application.
If you’ve ever used Storybook with Next.js, you’ll notice you need to configure it to handle CSS and images properly. The process can be frustrating but these simple steps will help lead the way.
Start by Setting Up the Next.js Project
If you don’t already have a Next.js project set up, follow the officialNext.jsGetting Started guide to create a new project.
Initialize Storybook
Run the following command in the terminal to initialize Storybook.
This command detects the project you are working on, installs all the necessary packages, and creates example stories.
Set Up CSS
The first thing you need to do is to include the global CSS file in preview.js.
Set Up Global Styles
The global styles apply across the entire application. To apply these styles in stories, you could import the file into individual stories and that would work. However, you would end up rewriting the import statement across many stories or even forgetting to.
A better solution is to import the global styles in the .storybook/preview.jsfile, a file that holds all the shared configurations for Storybook.
At the top of .storybook/preview.js, include the following import statement.
Set Up Sass for Storybook in Next.js
By default, Storybook does not come with out-of-the-box support for theSass extension language. You need to extend the webpack configuration by installing style-loader, css-loader, and sass-loader.
Here is what these packages do:
To configure these packages, add the following code in .storybook/main.js:
After this, Sass should be available in Storybook.
Apply the Unoptimized Prop to Next.js Images
Next.js has many optimization features. One of them is image optimization through the image component which makes images load faster and adapt to the screen. It is, however, a pain to work with in Storybook since Storybook runs in isolation from the Next.js environment. It’s better to de-optimize images in stories.
To start, you need to serve the public directory in Storybook to indicate where the images are located. You can do it in thenpm scriptsmap in thepackage.jsonfile or in.storybook/main.js.
Inpackage.json, update the Storybook scripts to serve the public directory.
Alternatively, modify./storybook/main.jsto include the static directory which, in this case, is the public folder.
After serving the public directory, apply the unoptimized prop to the Next.js images used in stories.
In .storybook/main.js, add the following code:
This code uses the unoptimized prop anywhere the image component is used.
Using Storybook in Next.js
Storybook is one of those tools you think are too tedious to use but once you start using them, you realize what you were missing. With Storybook, you can create and test out different components without running your whole application. It, therefore, makes building components from the ground up simple.
If you’re using Next.js, make sure you configure the CSS and de-optimize images before getting started.
Next.js gives you fast, flexible apps that you can get set up in no time. Find out just why it’s fast becoming one of the most popular web frameworks.
Every squeak is your PC’s way of crying for help.
The key is not to spook your friends with over-the-top shenanigans.
Windows is great, but adding this makes it unstoppable.
The fix was buried in one tiny toggle.
You can block out the constant surveillance and restore your privacy with a few quick changes.
