Closed17

nextjs × storybook 導入

TatsukiTatsuki

とりあえずnextjsのプロジェクト作る(なんとなくtailwindも入れる)

npx create-next-app@latest --typescript
npx: installed 1 in 3.787s
✔ What is your project named? … story-book-test
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use Tailwind CSS with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ Would you like to use experimental `app/` directory with this project? … No / Yes
✔ What import alias would you like configured? … @/*
Creating a new Next.js app in /Users/tatsukisato/story-book-test.

Using npm.

Initializing project with template: default-tw


Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- tailwindcss
- postcss
- autoprefixer
- eslint
- eslint-config-next

(中略)

Initialized a git repository.

Success! Created story-book-test at /Users/tatsukisato/story-book-test

TatsukiTatsuki

開発サーバー立ち上げてnextjsのテストページ表示されればok

cd story-book-test
npm run dev
TatsukiTatsuki

Storybookの初期化まで

下記コマンドで初期化

npx sb init
TatsukiTatsuki
npx sb init
Need to install the following packages:
  sb@7.0.7
Ok to proceed? (y)

 storybook init - the simplest way to add a Storybook to your project.

(node:13630) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
 • Detecting project type. ✓
 • Adding Storybook support to your "Next" app
npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile

added 859 packages, and audited 1189 packages in 2m

237 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
. ✓
 • Preparing to install dependencies. ✓



up to date, audited 1189 packages in 1s

237 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
. ✓
🔎 checking possible migrations..

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry


🔎 found a 'eslintPlugin' migration:
╭ Automigration detected ──────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                      │
│   We've detected you are not using our eslint-plugin.                                                                                │
│                                                                                                                                      │
│   In order to have the best experience with Storybook and follow best practices, we advise you to install eslint-plugin-storybook.   │
│                                                                                                                                      │
│   More info: https://github.com/storybookjs/eslint-plugin-storybook#readme                                                           │
│                                                                                                                                      │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔ Do you want to run the 'eslintPlugin' migration on your project? … yes
✅ Adding dependencies: eslint-plugin-storybook

added 6 packages, and audited 1195 packages in 4s

238 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
✅ Adding Storybook plugin to .eslintrc.json
✅ ran eslintPlugin migration

╭ Migration check ran successfully ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                               │
│   Successful migrations:                                                                                                                                      │
│                                                                                                                                                               │
│   eslintPlugin                                                                                                                                                │
│                                                                                                                                                               │
│   ─────────────────────────────────────────────────                                                                                                           │
│                                                                                                                                                               │
│   If you'd like to run the migrations again, you can do so by running 'npx storybook@next automigrate'                                                        │
│                                                                                                                                                               │
│   The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.   │
│                                                                                                                                                               │
│   Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/migration-guides/7.0                    │
│   And reach out on Discord if you need help: https://discord.gg/storybook                                                                                     │
│                                                                                                                                                               │
│   ─────────────────────────────────────────────────                                                                                                           │
│                                                                                                                                                               │
│   You can find more information for a given dependency by running npm ls --depth=1 <package-name>                                                             │
│                                                                                                                                                               │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯


For more information visit: https://storybook.js.org

To run your Storybook, type:

   npm run storybook

TatsukiTatsuki

途中eslintのマイグレートに関するwarning出たけどyesで続行

TatsukiTatsuki

npm run storybookを実行する

npm run storybook

> story-book-test@0.1.0 storybook
> storybook dev -p 6006

@storybook/cli v7.0.7

(node:15088) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
info => Starting manager..
WARN You (or an addon) are using the 'config' preset field. This has been replaced by 'previewAnnotations' and will be removed in 8.0
info Addon-docs: using MDX2
info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
╭──────────────────────────────────────────────────╮
│                                                  │
│   Storybook 7.0.7 for nextjs started             │
│   210 ms for manager and 8.28 s for preview      │
│                                                  │
│    Local:            http://localhost:6006/      │
│    On your network:  http://172.20.10.5:6006/    │
│                                                  │
╰──────────────────────────────────────────────────╯
<i> [webpack-dev-middleware] wait until bundle finished: /runtime~main.iframe.bundle.js
<i> [webpack-dev-middleware] wait until bundle finished: /vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-6c2f01.iframe.bundle.js
<i> [webpack-dev-middleware] wait until bundle finished: /main.iframe.bundle.js
^C
TatsukiTatsuki

nextjsで追加するために諸々入れる

npm install --save-dev @storybook/addon-postcss tsconfig-paths-webpack-plugin @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods @babel/plugin-proposal-private-property-in-object tsconfig-paths-webpack-plugin @mdx-js/react
TatsukiTatsuki

自作のButton Componentを表示してみる

TatsukiTatsuki

下記ファイルを作成する

src/components/Button/index.tsx
function Button({ children }) {
    return <button>{children}</button>;
}

export default Button;
src/components/Button/index.stories.tsx
import Button from './index';

export default {
  title: 'Button',
  component: Button,
};

export const HelloButton = () => <Button>Hello World!</Button>;
TatsukiTatsuki

sampleはいらないので、.storybook/main.tsも修正する

.storybook/main.ts
import type { StorybookConfig } from "@storybook/nextjs";
const config: StorybookConfig = {
  stories: ["../src/components/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

TatsukiTatsuki

この状態で再度立ち上げるとボタンが表示され、example項目が非表示になる

このスクラップは2023/05/29にクローズされました