How to Build a Component Library in next with Storybook

Building a component library in Next.js with Storybook involves creating reusable UI components in Next.js and using Storybook to visualize and document them. Here’s a step-by-step guide on how to set up a component library in Next.js and integrate it with Storybook:

1) Set Up a Next.js Project

If you don’t have a Next.js project yet, you can create one:

npx create-next-app@latest my-component-library

cd my-component-library

This will create a basic Next.js project with the default settings.

2) Install Storybook

Install Storybook and its dependencies on your Next.js project:

npx sb init

This will automatically install and configure Storybook for you, including the required dependencies. After the installation is completed, you’ll see a storybook folder created in your project.

3) Set Up Storybook for React

Storybook is pre-configured for React, so there shouldn’t be any extra setup required beyond the initial installation. You may want to install additional dependencies for handling assets such as images or CSS.

Install dependencies:

npm install --save @storybook/react

4) Create Components

Now you can start building reusable UI components. Inside the project, you can create a components folder to store all your components.

For example:

Create a simple button component Button.js inside the components folder:

// components/Button.js
export default function Button({ children, onClick }) {
    return (
      <button onClick={onClick} className="btn">
        {children}
      </button>
    );
}

5) Create Storybook Stories for Components

Now, you need to create a Storybook file for each component. Storybooks use stories to showcase how each component works.

Inside the storybook folder, create a file for the Button component’s story.

For example:

// stories/Button.stories.js
import Button from '../components/Button';
export default {
  title: 'Button',
  component: Button,
};
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
  children: 'Click Me',
  onClick: () => alert('Button clicked!'),
};

This will tell Storybook how to render the Button component with different states.

6) Start Storybook

After creating your component and stories, you can start Storybook:

npm run storybook

This will run Storybook in development mode, and you can open it in your browser at http://localhost:6006.

7) Customize Storybook Configuration (Optional)

Storybook has a default configuration, but you can customize it further in the storybook folder. For example, you can change the Storybook theme, add add-ons (such as accessibility checks or knobs), or configure webpack for advanced usage.

Example: Adding @storybook/addon-knobs

To make your stories interactive, you can install the knobs addon:

npm install @storybook/addon-knobs --save-dev

Then, add it to your .storybook/main.js file:

8) Share Your Component Library

Once your component library is ready, you can share it in multiple ways:

• Package as a NPM Package: You can package the library and publish it to npm so other developers can install and use it.
• Use it in other projects: You can import the component library from your Next.js or other React projects using relative imports or publish it to a private registry.

9) Optionally Set Up Storybook Deployment

To share the Storybook preview, you can deploy it using services like Vercel, Netlify, or [GitHub Pages].

For example, to deploy Storybook on Vercel, you can follow these steps:

1. Commit your changes to GitHub.
2. Connect your repository to Vercel.
3. Vercel will automatically detect the project, and you can set up the build command as:

npm run build && npm run export

Storybook will be deployed to a live URL.

Summary of Steps:

1. Set up Next.js project.
2. Install Storybook with npx sb init.
3. Create reusable components like a button, etc.
4. Create Storybook stories to visualize components.
5. Run Storybook with npm run storybook.
6. Deploy Storybook (optional) to share with others.

By following these steps, you’ll have a component library integrated with Storybook, helping you visualize and maintain UI components efficiently.

Source: Read More