# Storybook with Next.js & Slice Machine

**URL:** <https://community.prismic.io/t/storybook-with-next-js-slice-machine/9264>\
**Category:** FAQs\
**Created:** [March 4, 2022, 4:12pm UTC](https://community.prismic.io/t/storybook-with-next-js-slice-machine/9264 "2022-03-04T16:12:28Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Levi](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/levi/32/24_2.png) [@Levi](https://community.prismic.io/u/Levi)\
**Post date:** [March 4, 2022, 4:12pm UTC](https://community.prismic.io/t/storybook-with-next-js-slice-machine/9264/1 "2022-03-04T16:12:28Z")

</div>

Learn how to use Storybook to develop components with mock data.

* * *

> **Storybook Support**
> 
> Storybook is now optional, the default option for developing components with mock data is [Slice Simulator](https://prismic.io/docs/technologies/setup-slice-simulator-nextjs). Slice Machine will still continue to create Stories automatically for your components if you wish to continue using Storybook.

## What is Storybook?

[Storybook](https://storybook.js.org/) is a UI component explorer for front-end developers. Slice Machine and Storybook combine the mock data and the Next.js component so you can develop your component and preview how it will looks without having to publish content in the CMS repository, thus speeding up your development process.

## Install Storybook

Open a new terminal window and run the following command inside your Slice Machine project.

```auto
npx storybook init

```

### What does this command do?

- Installs `@react/storybook` and other dependencies.
- Register [stories](https://storybook.js.org/docs/react/get-started/whats-a-story/).

### Update the main.js file

Navigate to `.storybook/main.js` and add the following config to get the paths for your Slices that Slice Machine automatically generates.

```auto
// .storybook/main.js
const glob = require("glob");
const getStoriesPaths = () => {
  return [
    ".slicemachine/assets/**/*.stories.@(js|jsx|ts|tsx|svelte)",
    "customtypes/**/*.stories.@(js|jsx|ts|tsx|svelte)",
  ].reduce((acc, p) => (glob.sync(p).length ? [...acc, `../${p}`] : acc), []);
};

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
    ...getStoriesPaths()
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  "framework": "@storybook/react"
}

```

### Update your sm.json

You need to add a storybook field in your `sm.json` file to direct to the port in which Storybook is running. In the example below we're directing to `http://localhost:6006/`, Storybook will tell you what port it's running on when you install it.

```auto
{
  "apiEndpoint": "https://mon29test.prismic.io/api/v2",
  "libraries": [
    "@/slices"
  ],
  "storybook": "http://localhost:6006",
  "_latest": "0.1.0"
}

```

## Run Storybook

Finally, if Storybook isn't launched yet, open a new terminal window and launch it. You will be automatically prompted to a new browser tab. You'll already be able to see your Slices or Stories in the left-hand navigation.

To open Storybook manually, run either the npm or yarn command below:

npm

```auto
npm run storybook

```

yarn

```auto
yarn run storybook

```

## The \*.stories.js file

[Quoting the Storybook official docs](https://storybook.js.org/docs/react/get-started/whats-a-story): A story captures the rendered state of a UI component. You can browse the stories in the UI and see the code behind them in files that end with `.stories.js` or `.stories.ts`. The stories are written in [Component Story Format](https://storybook.js.org/docs/react/api/csf)(CSF) an ES6 modules-based standard for writing component examples.

## Using Global CSS

To use Global CSS files like this with the Storybook you need to declare it in the Storybook settings file located `../.storybook/main.js`. Here you'll need to add the path to your CSS file, you can see what this file should look like with the path to your CSS below.

```auto
const glob = require("glob");
const getStoriesPaths = () => {
  return [
    ".slicemachine/assets/**/*.stories.@(js|jsx|ts|tsx|svelte)",
    "customtypes/**/*.stories.@(js|jsx|ts|tsx|svelte)",
  ].reduce((acc, p) => (glob.sync(p).length ? [...acc, `../${p}`] : acc), []);
};

module.exports = {
  stories: [...getStoriesPaths(), "../styles/globals.css"]
}

```

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [December 21, 2023, 5:27pm UTC](https://community.prismic.io/t/storybook-with-next-js-slice-machine/9264/2 "2023-12-21T17:27:42Z")

</div>