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 official Next.js Getting 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.js file, 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 the Sass extension language. You need to extend the webpack configuration by installing style-loader, css-loader, and sass-loader.
Here is what these packages do:
style-loader injects CSS into the DOM. css-loader interprets @import and URL() like import/require and resolves them. sass-loader loads SCSS into CSS.
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 the npm scripts map in the package.json file or in .storybook/main.js.
In package.json, update the Storybook scripts to serve the public directory.
Alternatively, modify ./storybook/main.js to 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.
