Closed17
nextjs × storybook 導入
今更ながらNextjsにStorybookを導入してみる
リポジトリ↓
とりあえず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
開発サーバー立ち上げてnextjsのテストページ表示されればok
cd story-book-test
npm run dev
Storybookの初期化まで
下記コマンドで初期化
npx sb init
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
途中eslintのマイグレートに関するwarning出たけどyesで続行
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
テストページが表示されたので成功
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
自作のButton Componentを表示してみる
下記ファイルを作成する
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>;
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;
この状態で再度立ち上げるとボタンが表示され、example項目が非表示になる
公開するところまでやってみたい
残り学習
これを参考にすると良さそう
このスクラップは2023/05/29にクローズされました