How to set up Next.js + Storybook

Storybook is a UI development, testing, and documentation tool.
This article describes how to set up Next.js + Storybook.

Next.js

How to set up TypeScript + Next.js
https://dev.to/jtakahashi64/how-to-set-up-nextjs-with-typescript-20in

Install

npx storybook init

npm i --save-dev tsconfig-paths-webpack-plugin

Settings

// .storybook/main.js

const path = require("path");
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

// ...

module.exports = {
  // ...
  typescript: { reactDocgen: false },
  webpackFinal(config) {
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, "../src"),
    ];

    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin(),
    ];
    return config;
  },
}

Write

// src/components/example.tsx

interface Props {
  text: string;
}

const Example = (props: Props) => {
  return <p data-testid="text">{props.text}</p>;
};

export default Example;

// src/pages/example.tsx

import type { NextPage } from "next";

import Example from "@/components/example";

const Home: NextPage = () => {
  return <Example text={"Hello, World."} />;
};

export default Home;

// src/components/example.stories.tsx

import Example from "@/components/example";

export default { component: Example };

export const Default = {
  args: {
    text: "Hello, World! from Storybook.",
  },
};

Run

npm run storybook

http://localhost:6006/

ESLint

# .eslintrs.json

{
  // ...

  "overrides": [
    {
      "files": ["src/**/*.stories.tsx"],
      "rules": {
        "import/no-anonymous-default-export": "off"
      }
    }
  ],

  // ...
}