nextjs × storybook 導入

cd story-book-test
npm run dev

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

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

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

function Button({ children }) {
    return <button>{children}</button>;
}

export default Button;

import Button from './index';

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

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

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;