{"id":21890801,"url":"https://github.com/chantastic/storybook-nextjs","last_synced_at":"2026-02-18T18:31:18.694Z","repository":{"id":46687057,"uuid":"408615145","full_name":"chantastic/storybook-nextjs","owner":"chantastic","description":"A setup run-thru of Storybook in a stock NextJS app","archived":false,"fork":false,"pushed_at":"2021-09-30T01:14:14.000Z","size":1399,"stargazers_count":2,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-10-20T06:58:33.030Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chantastic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-20T22:13:16.000Z","updated_at":"2022-07-30T11:15:15.000Z","dependencies_parsed_at":"2022-09-02T19:40:49.846Z","dependency_job_id":null,"html_url":"https://github.com/chantastic/storybook-nextjs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chantastic/storybook-nextjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Fstorybook-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Fstorybook-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Fstorybook-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Fstorybook-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chantastic","download_url":"https://codeload.github.com/chantastic/storybook-nextjs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Fstorybook-nextjs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29589440,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-18T16:55:40.614Z","status":"ssl_error","status_checked_at":"2026-02-18T16:55:37.558Z","response_time":162,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-28T12:16:50.911Z","updated_at":"2026-02-18T18:31:18.678Z","avatar_url":"https://github.com/chantastic.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# storybook-nextjs\n\nA setup run-thru of [Storybook](https://storybook.js.org) in a stock [Next.js](https://nextjs.org) app\n\n## Steps\n\n### Next.js\n\n[Instructions](https://nextjs.org/docs)\n\n- run `npx create-next-app --ts --use-npm`\n  - npm because i prefer it to yarn\n  - typescript because i thought it might add a level of configuration complication\n  - **This will create a new project directory. There isn't an `in-place` option.**\n- `cd storybook-nextjs`\n- `npm run dev`\n- `visit http://localhost:3000`\n\n### Storybook\n\n[Instructions](https://storybook.js.org/docs/react/get-started/install)\n\n- run `npx sb init` _in_ project root\n  - this makes sense whene there is an existing project (like this). it's not perfectly clear if I were using Storybook to build out a new, single component on design system\n  - \u003cmark\u003eare there starters for projects like individual components and design systems for folks who want to use Storybook as their primary artifact?\u003c/mark\u003e\n\n\u003e audited 1830 packages in 8.289s\n\u003e 236 packages are looking for funding\n\u003e run `npm fund` for details\n\n\u003e found 40 vulnerabilities (30 moderate, 10 high)\n\u003e run `npm audit fix` to fix them, or `npm audit` for details\n\n- this feels like:\n  - a LOT of dependencies\n  - a lot of introduced vulnerabilities\n- run `npm audit fix`\n  - does not resolve vulnerabilities\n\n\u003e fixed 0 of 40 vulnerabilities in 1830 scanned packages\n\u003e 40 vulnerabilities required manual review and could not be updated\n\n- `npm run storybook`\n  - ✅ works!\n- documentation jumps directly into [\"What's a story?\"](https://storybook.js.org/docs/react/get-started/whats-a-story)\n  - because we used a generator, there are LOTS of new files. i think a document on the structure is warrented. even if just a link to another doc\n  - items to cover\n    - `.storybook`\n      - `main.js`\n      - `preview.js`\n    - `stories`\n      - `...stories`\n      - `assets`\n      - `introduction.mdx`\n  - interesting time to cover the difference between stories and markdown\n  - Component Story Format (CSF) should be a link to [docs/{library}/api/csf](https://storybook.js.org/docs/react/api/csf)\n  - `alt` tags for images are sparce\n    - consider \"Screenshot of Storybook in browser. The sidebar has Story Button/Primary selected. The main are of the site shows the \"Canvas\" tab with the rendered button\"\n  - slight divergance in documentation demo and generated code\n\n_documentation_\n\n```tsx\n// Button.stories.ts | Button.stories.tsx\n\nimport React from \"react\";\n\nimport { Story, Meta } from \"@storybook/react\";\n\nimport { Button } from \"./Button\";\n\nexport default {\n  component: Button,\n  title: \"Components/Button\",\n} as Meta;\n\n//👇 We create a “template” of how args map to rendering\nconst Template: Story\u003cButtonProps\u003e = (args) =\u003e \u003cButton {...args} /\u003e;\n\nexport const Primary = Template.bind({});\n\nPrimary.args = {\n  primary: true,\n  label: \"Button\",\n};\n```\n\n_SB generated_\n\n```tsx\nimport React from \"react\";\nimport { ComponentStory, ComponentMeta } from \"@storybook/react\";\n\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Example/Button\",\n  component: Button,\n  argTypes: {\n    backgroundColor: { control: \"color\" },\n  },\n} as ComponentMeta\u003ctypeof Button\u003e;\n\nconst Template: ComponentStory\u003ctypeof Button\u003e = (args) =\u003e \u003cButton {...args} /\u003e;\n\nexport const Primary = Template.bind({});\nPrimary.args = {\n  primary: true,\n  label: \"Button\",\n};\n```\n\n- Setup a story outside of `/stories`\n  - update config to include path\n  - add story\n  - restart server (not sure if this is always the case for config)\n  - [include global css](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering), link conveniently supplied\n    - but there are no examples. kinda goes in a link loop\n- Why don't I see type errors for `href` when attempting to use the component in a `.tsx` story?\n- import `styles/globals.css` to `.storybook/preview.js`\n- import `styles/Home.module.css` into `index.stories.tsx`\n- no info here on CSS Modules\n  - searched and got a lot of \"Storybook CSS Modules don't work\" hits\n    - https://github.com/storybookjs/storybook/issues/12464\n    - nothing on the [Styling and CSS](https://storybook.js.org/docs/react/configure/styling-and-css) page\n    - [storybook-css-moudles-preset](https://www.npmjs.com/package/storybook-css-modules-preset) is the first promising result\n      - `npm install -D storybook-css-modules-preset`\n      - `40 fvulnerabilities (30 moderate, 10 high)`\n      - append `storybook-css-modules-preset` to `addons` in `./storybook/main.js`\n      - works\n      - if this is the preferred way, we should document it. if not, we should create a new package\n  - static next assets aren't available\n    - https://www.google.com/search?q=storybook+assets+next.js\u0026client=safari\u0026rls=en\u0026sxsrf=AOaemvIo6KjwrayvVGhUoG2-A9_PTB4JcA%3A1632184464335\u0026ei=kChJYfTgE6y_0PEP_Muh6Ao\u0026oq=storybook+assets+next.js\u0026gs_lcp=Cgdnd3Mtd2l6EAMyBQgAEM0CMgUIABDNAjoHCAAQRxCwAzoICAAQ5AIQsAM6BQgAEIAEOgYIABAWEB46BQghEKABOgcIIRAKEKABSgUIPBIBMUoECEEYAFDHXVi3Z2DAamgBcAJ4AIAB4AGIAfcKkgEFMC42LjKYAQCgAQHIAQvAAQE\u0026sclient=gws-wiz\u0026ved=0ahUKEwj06ND56I7zAhWsHzQIHfxlCK0Q4dUDCA0\u0026uact=5\n    - https://stackoverflow.com/questions/64016896/cant-serve-static-files-in-nextjs-storybook\n    - https://storybook.js.org/docs/react/configure/images-and-assets#serving-static-files-via-storybook\n    - https://dev.to/jonasmerlin/how-to-use-the-next-js-image-component-in-storybook-1415\n    - https://github.com/vercel/next.js/issues/18393\n      - https://github.com/vercel/next.js/issues/18393#issuecomment-722024125\n      - https://github.com/vercel/next.js/issues/18393#issuecomment-749631898\n  - deferring to next commit\n- At this point, I'm really curious if there could be some type of generator that would include story setup (which i end up copy-pasting)\n- can we automatically create storybooks for anything in the /pages directory?\n\n### Chromatic\n\n- Login into Chromatic (create account)\n- Choose Github option for selecting a project\n- click on project\n- see instructions\n  - `npm install --save-dev chromatic`\n  - `npx chromatic --project-token=1fd2615c5317`\n    - questions:\n      - is the token refreshable?\n      - what happens if i accidentaly make my token public?\n      - are there instructions for hiding the token?\n      - how do i get back to this link again if i need it later?\n        - [add options](https://www.chromatic.com/docs/cli)\n        - [learn more](https://www.chromatic.com/docs/setup)\n        - is there a way to have a \"signed-in\" version of these docs with the token (like Stripe)?\n        - automation instructions?\n        - talk about how this is the \"baseline\"?\n        - reads more like it's just about publishing/hosting\n\n```bash\nChromatic CLI v0.1.0\nundefined\n\n  ✔ Authenticated with Chromatic\n    → Using project token '********5317'\n  ✔ Retrieved git information\n    → Commit '9d9c3d0' on branch 'main'; no parent commits found\n  ✖ Collecting Storybook metadata\n    → Most likely, you forgot to run npm install or yarn before running Chromatic.\n    Build Storybook\n    Publish your built Storybook\n    Verify your Storybook\n    Test your stories\n\nInvalid dist-tag 'latest' returned from registry; skipping update check\n\nUnhandled promise rejection: Cannot read property 'email' of undefined\nTypeError: Cannot read property 'email' of undefined\n    at /Users/chantastic/.npm/_npx/15962/lib/node_modules/chromatic/bin/218.main.cjs:251:291\n    at Ge (/Users/chantastic/.npm/_npx/15962/lib/node_modules/chromatic/bin/218.main.cjs:256:99)\n    at processTicksAndRejections (internal/process/task_queues.js:95:5)\n    at async Promise.all (index 0)\n    at async Ze (/Users/chantastic/.npm/_npx/15962/lib/node_modules/chromatic/bin/218.main.cjs:155:214)\n    at async Module.Ve (/Users/chantastic/.npm/_npx/15962/lib/node_modules/chromatic/bin/218.main.cjs:155:101)\n```\n\n- this was totally a failure on my end. not sure if the install failed, if i typed it wrong, or what. but chromatic didn't get installed and _this_ was the problem\n\n```\nChromatic CLI v0.1.0\nundefined\n\n  ✔ Authenticated with Chromatic\n    → Using project token '********5317'\n  ✔ Retrieved git information\n    → Commit 'aca2d29' on branch 'main'; no parent commits found\n  ✔ Collected Storybook metadata\n    → Storybook v6.3.8 for React; supported addons found: Actions, Essentials, Links\n  ✔ Storybook built in 47 seconds\n    → View build log at /Users/chantastic/Documents/GitHub/storybook-nextjs/build-storybook.log\n  ✔ Publish complete in 8 seconds\n    → View your Storybook at https://614a32227eef4b003adb8599-pbgtyyibez.chromatic.com\n  ✔ Started build 1\n    → Continue setup at https://www.chromatic.com/setup?appId=614a32227eef4b003adb8599\n  ✔ Build 1 auto-accepted\n    → Tested 10 stories across 5 components; captured 10 snapshots in 10 seconds\n\nInvalid dist-tag 'latest' returned from registry; skipping update check\n\nℹ Speed up Continuous Integration\nYour project is linked to GitHub so Chromatic will report results there.\nThis means you can pass the --exit-once-uploaded flag to skip waiting for build results.\nRead more here: https://www.chromatic.com/docs/cli#chromatic-options\n\n✔ Build passed. Welcome to Chromatic!\nWe found 5 components with 10 stories and took 10 snapshots.\nℹ Please continue setup at https://www.chromatic.com/setup?appId=614a32227eef4b003adb8599\n\n⚠ No 'chromatic' script found in your package.json\nWould you like me to add it for you? [y/N]\n```\n\n- all the links are absolutely incredible here!\n- i have felt concerned about how to answer the question an the end without more details (as mentioned above)\n  - went with `y` because i wanted to re-acquaint with what it does\n\n```\n✔ Added script 'chromatic' to package.json\nYou can now run it here or in CI with 'npm run chromatic' or 'yarn chromatic'.\n\nℹ Your project token was added to the script via the --project-token flag.\nIf you're running Chromatic via continuous integration, we recommend setting\nthe CHROMATIC_PROJECT_TOKEN environment variable in your CI environment.\nYou can then remove the --project-token from your package.json script.\n```\n\n![Screenshot of successful first build](./README/Screen Shot 2021-09-21 at 1.04.09 PM.png)\n![Screenshot of screen informing me how to capture a change](./README/Screen Shot 2021-09-21 at 1.07.40 PM.png)\n\nThis line gets added when I publish without changes\n\n```\nNo changes found in the Storybook you published. Make a UI tweak and publish again to continue the demo.\n```\n\nI'd really like a \"Skip\" option or \"show me this later\" option when I'm just trying to get set up. As it stands, I'm not allowed to proceed until I do this. But I don't have anything that I want to _change_ at the moment.\n\nI have personally aborted this screen on many occasions.\n\nHere, I will add an arbitrary story just to get it to pass.\n\nMight be worth mentioning, at this point, that I can push anything I want. Can I do it without commiting?\n\n---\n\nJust pushed a build without committing. I've never thought about doing that but totally makes sense. I'm using Chromatic to update the baseline.\n\n---\n\nAt this point, I'm most curious about best practices for setting this up.\nSome thoughts:\n\n- If have a private repo, i'm not worriedb about tokens. More so in OSS\n- As a user, my next big question is \"how do i set this up with CI\"\n  - But the first messaging I see is \"Share this project with your teammates\"\n  - I'd prefer \"How to integrate with CI\"\n\nI didn't realize until this point that the links were part of a guide. Is this stated somewhere in the beginning of the setup process?\n\nI'm continuing to develop my understanding of devisions:\n\n- Storybook (component development environment and showcase)\n- UI Test (compare builds against )\n\nGreat [information about tokens](https://www.chromatic.com/docs/review#pull-requests-from-forks)\n\n[Article on configuring CI](https://www.chromatic.com/docs/ci#configure-ci)\n\n### Storybook + Chromatic + GitHub Actions\n\nhttps://www.chromatic.com/docs/github-actions\n\n- covers setup\n- covers secrets\n- i was easily able to reset my token\n- remove previous script and token\n\n### API data and MSW?\n\n- Add `getServerSideProps` to fetch API data from `/api/hello`\n  - Works on the site, obvi\n  - Doesn't break chromatic, because the prop is (technically) optional\n  - I can provide it as prop manually via args\n- Can I import and call `getServerSideProps`?\n  - yes but the request will need to be mocked\n  - ??? i can get the data in using client-side React, with `useEffect` and `useState`. but this changes the behavior of the story, from the behavior of the page\n    - is there a way to defer the story rendering until all data is collected? this is more akin to gSSP\n      - [This loaders doc suggests use of args instead](https://storybook.js.org/docs/react/writing-stories/loaders)\n      - [Core: Add async loader](https://github.com/storybookjs/storybook/pull/12699) by Michael Shilman\n      - loaders work!\n- Introduce `loader` to call `getServerSideProps` function\n  - Now we can `await` data but ensure that it's present pre-render\n    - This matches our expectation of `getServerSideProps`\n  - We're not mocking anything yet. We're catching the failed call to the API endpoint and returning data.\n  - There's a step (maybe even before this), where let it make the call, and just run the server (as a demonstration)\n    - nevermind. that requires a CORS side-quest. maybe worth exploring but not on the critical path\n\n### (didn't need msw yet. i can mock manually. circling back)\n\nhttps://storybook.js.org/addons/msw-storybook-addon\n\n- `npm i -D msw msw-storybook-addon`\n- enable msw, per instructions\n\n```\n// preview.js\nimport { addDecorator } from '@storybook/react'\nimport { initializeWorker, mswDecorator } from 'msw-storybook-addon'\n\ninitializeWorker()\naddDecorator(mswDecorator)\n```\n\n- run `npx msw init public/`\n- update storybook script to include public: `start-storybook -s public -p 6006`\n\n`[MSW] \"initializeWorker\" is now deprecated, please use \"initialize\" instead. This method will be removed in future releases.`\n\n- update code to `initialize`\n\n`FetchEvent.respondWith received an error: Returned response is null`\n\n- I'me experiencing load error issue. MSW fails to capture requests on refreshes.\n  - if i start by catching the error, then enabling msw, i see msw in the logs\n  - but on refresh, msw is enabled but does not respond to the request\n- ugh! i was calling `.json()` on the response from `getServerSideProps` which obviously screwed up responses. but nothing to do with the error above\n- At this point things are working but not reliably. msw is not loading before the story. further work is needed to make it work with loaders\n\n#### mswDecorator exploration\n\nI'm still having trouble loading. I'm going to remove the decorator, provided by the addon, and replipcate it myself:\n\nhttps://github.com/mswjs/msw-storybook-addon/blob/master/packages/msw-addon/src/mswDecorator.js#L39-L54\n\n```jsx\nexport const mswDecorator = (storyFn, { parameters: { msw = [] } }) =\u003e {\n  if (api) {\n    api.resetHandlers()\n\n    if (!Array.isArray(msw)) {\n      throw new Error(`[MSW] expected to receive an array of handlers but received \"${typeof msw}\" instead.\n        Please refer to the documentation: https://mswjs.io/docs/getting-started/mocks/`)\n    }\n\n    if (msw.length \u003e 0) {\n      api.use(...msw)\n    }\n  }\n\n  return storyFn()\n}\n```\n\nfound this helpful post on general initialization issues. this is definitely what i'm facing.\n\nhttps://github.com/mswjs/msw/issues/73\n\n\n- initializing in `preview.js`\n- logging from `loader`\n  - see access to parameters (including msw)\n  - no direct way of determining if msw loaded\n- removing `msw-storybook-addon` and initializing on my own worked without issue or additional consideration\n\n\n## Notes\n\n### Interactions as Chromatic light\n\n- I'm still forming a boundary around what Storybook is without Chromatic. And what the value is for developers\n- Interactions changes the value proposition quite a bit\n  - can i test navigation?\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchantastic%2Fstorybook-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchantastic%2Fstorybook-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchantastic%2Fstorybook-nextjs/lists"}