{"id":15155311,"url":"https://github.com/ryanclementshax/storybook-addon-next","last_synced_at":"2025-09-30T03:31:10.931Z","repository":{"id":37082934,"uuid":"446180101","full_name":"RyanClementsHax/storybook-addon-next","owner":"RyanClementsHax","description":"A no config Storybook addon that makes Next.js features just work in Storybook","archived":true,"fork":false,"pushed_at":"2023-09-26T13:29:54.000Z","size":2729,"stargazers_count":219,"open_issues_count":0,"forks_count":29,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-09-27T18:04:17.193Z","etag":null,"topics":["addon","next","nextjs","storybook"],"latest_commit_sha":null,"homepage":"","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/RyanClementsHax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["ryanclementshax"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2022-01-09T19:13:22.000Z","updated_at":"2024-08-08T20:13:15.000Z","dependencies_parsed_at":"2024-06-18T12:38:40.294Z","dependency_job_id":"9103cbee-9e39-47f7-a32b-0fe8d620a835","html_url":"https://github.com/RyanClementsHax/storybook-addon-next","commit_stats":{"total_commits":91,"total_committers":9,"mean_commits":10.11111111111111,"dds":"0.18681318681318682","last_synced_commit":"dffed6aa0b62d1ca7b6da045cb51479b217394bc"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanClementsHax%2Fstorybook-addon-next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanClementsHax%2Fstorybook-addon-next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanClementsHax%2Fstorybook-addon-next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanClementsHax%2Fstorybook-addon-next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RyanClementsHax","download_url":"https://codeload.github.com/RyanClementsHax/storybook-addon-next/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234695727,"owners_count":18873024,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["addon","next","nextjs","storybook"],"created_at":"2024-09-26T18:04:27.270Z","updated_at":"2025-09-30T03:31:05.365Z","avatar_url":"https://github.com/RyanClementsHax.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ryanclementshax"],"categories":[],"sub_categories":[],"readme":"# Storybook Addon Next \u003c!-- omit in toc --\u003e\n\n## ⚠️ DEPRECATED ⚠️ \u003c!-- omit in toc --\u003e\n\nThis addon has been deprecated in favor of [@storybook/nextjs](https://www.npmjs.com/package/@storybook/nextjs) which is the Storybook official addon for supporting Next.js features in Storybook. It supports everything `storybook-addon-next` does and much more! I even worked on developing this with them so you should be in good hands.\n\nConsult the [migration docs](./MIGRATING.md) for details on how to migrate.\n\n---\n\n**😱 No config support for Next.js**: Tired of writing and debugging webpack config? What Next.js supports out of the box, this addon makes possible in Storybook\n\n[![current version](https://img.shields.io/npm/v/storybook-addon-next.svg)](https://www.npmjs.com/package/storybook-addon-next)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)\n\n## Table of Contents \u003c!-- omit in toc --\u003e\n\n- [Supported Features](#supported-features)\n- [Requirements](#requirements)\n- [Examples](#examples)\n- [Getting Started](#getting-started)\n  - [Installation](#installation)\n  - [Register the Addon in main.js](#register-the-addon-in-mainjs)\n  - [Partay](#partay)\n- [Documentation](#documentation)\n  - [Options](#options)\n  - [Next.js's Image Component (partial support)](#nextjss-image-component-partial-support)\n    - [Local Images](#local-images)\n    - [Remote Images](#remote-images)\n    - [Optimization](#optimization)\n    - [AVIF](#avif)\n  - [Next.js Routing](#nextjs-routing)\n    - [Overriding defaults](#overriding-defaults)\n    - [Global Defaults](#global-defaults)\n    - [Default Router](#default-router)\n    - [Actions Integration Caveats](#actions-integration-caveats)\n  - [Sass/Scss](#sassscss)\n  - [Css/Sass/Scss Modules](#csssassscss-modules)\n  - [Styled JSX](#styled-jsx)\n  - [Postcss](#postcss)\n  - [Absolute Imports](#absolute-imports)\n  - [Runtime Config](#runtime-config)\n  - [Custom Webpack Config](#custom-webpack-config)\n  - [Typescript](#typescript)\n  - [next.config.js](#nextconfigjs)\n    - [ESM](#esm)\n  - [Notes for Yarn v2 and v3 users](#notes-for-yarn-v2-and-v3-users)\n  - [FAQ](#faq)\n    - [Statically imported images won't load](#statically-imported-images-wont-load)\n    - [This addon breaks when the .mjs extension for the next config is used](#this-addon-breaks-when-the-mjs-extension-for-the-next-config-is-used)\n    - [Module not found: Error: Can't resolve \\[package name\\]](#module-not-found-error-cant-resolve-package-name)\n- [Similar Projects](#similar-projects)\n- [Want to suggest additional features?](#want-to-suggest-additional-features)\n- [Didn't find what you were looking for?](#didnt-find-what-you-were-looking-for)\n\n## Supported Features\n\n👉 [Next.js's Image Component (partial support)](#nextjss-image-component-partial-support)\n\n👉 [Next.js Routing](#nextjs-routing)\n\n👉 [Sass/Scss](#sassscss)\n\n👉 [Css/Sass/Scss Modules](#csssassscss-modules)\n\n👉 [Styled JSX](#styled-jsx)\n\n👉 [Postcss](#postcss)\n\n👉 [Absolute Imports](#absolute-imports)\n\n👉 [Runtime Config](#runtime-config)\n\n👉 [Custom Webpack Config](#custom-webpack-config)\n\n👉 [Typescript](#typescript)\n\n## Requirements\n\n- [Next.js](https://nextjs.org/) \u003e= 9.x\n- [Storybook](https://storybook.js.org/) \u003e= 6.x\n  - Storybook webpack 5 builder\n    - [Intro](https://storybook.js.org/blog/storybook-for-webpack-5/)\n    - [Installation guide](https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324)\n    - It's not that this plugin can't support the webpack 4 builder, it's just that there hasn't been much of a need to and this is what Storybook recommends for nextjs apps. If you feel that you have a good use case, feel free to [open up an issue](https://github.com/RyanClementsHax/storybook-addon-next/issues).\n- Your Next.js config file uses the `.js` extension and not the `.mjs` extension (i.e. `next.config.js` not `next.config.mjs`)\n  - See [next.config.js](#nextconfigjs) for more details\n\n## Examples\n\n\u003e To run any example, first build the addon by running `yarn build` in the root of this repo.\n\n- Nextjs v13 - [Source](https://github.com/RyanClementsHax/storybook-addon-next/blob/main/examples/nextv13/README.md)\n- Nextjs v12 - [Source](https://github.com/RyanClementsHax/storybook-addon-next/blob/main/examples/nextv12/README.md)\n- Tailwindcss - [Source](https://github.com/RyanClementsHax/storybook-addon-next/blob/main/examples/with-tailwindcss/README.md)\n- SVGR - [Source](https://github.com/RyanClementsHax/storybook-addon-next/blob/main/examples/svgr/README.md)\n- Nx - [Source](https://github.com/RyanClementsHax/storybook-addon-next/blob/main/examples/with-nx/README.md)\n- Nextjs v11.1 - [Source](https://github.com/RyanClementsHax/storybook-addon-next/blob/main/examples/nextv11_1/README.md)\n- Nextjs v11.0 - [Source](https://github.com/RyanClementsHax/storybook-addon-next/blob/main/examples/nextv11_0/README.md)\n- Nextjs v10 - [Source](https://github.com/RyanClementsHax/storybook-addon-next/blob/main/examples/nextv10/README.md)\n- Nextjs v9 - [Source](https://github.com/RyanClementsHax/storybook-addon-next/blob/main/examples/nextv9/README.md)\n\n## Getting Started\n\n### Installation\n\nInstall `storybook-addon-next` using [`yarn`](https://yarnpkg.com/en/package/storybook-addon-next):\n\n```bash\nyarn add --dev storybook-addon-next\n```\n\nOr [`npm`](https://www.npmjs.com/package/storybook-addon-next):\n\n```bash\nnpm install --save-dev storybook-addon-next\n```\n\n### Register the Addon in main.js\n\n```js\n// .storybook/main.js\n\nmodule.exports = {\n  // other config ommited for brevity\n  addons: [\n    // ...\n    'storybook-addon-next'\n    // ...\n  ]\n}\n```\n\n### Partay\n\n🥳🎉 Thats it! The [supported features](#supported-features) should work out of the box.\n\nSee [Documentation](#documentation) for more details on how the supported features work in this addon.\n\nIf something doesn't work as you would expect, feel free to [open up an issue](https://github.com/RyanClementsHax/storybook-addon-next/issues).\n\n## Documentation\n\n### Options\n\nThis addon can be passed an options object for addional configuration if needed.\n\nFor example:\n\n```js\n// .storybook/main.js\nconst path = require('path')\n\nmodule.exports = {\n  // other config ommited for brevity\n  addons: [\n    // ...\n    {\n      name: 'storybook-addon-next',\n      options: {\n        nextConfigPath: path.resolve(__dirname, '../next.config.js')\n      }\n    }\n    // ...\n  ]\n}\n```\n\n- `nextConfigPath`: The absolute path to the `next.config.js`\n\n### Next.js's Image Component (partial support)\n\n[next/image](https://nextjs.org/docs/api-reference/next/image) is [notoriously difficult](https://github.com/vercel/next.js/issues/18393) to get working with storybook. This addon allows you to use Next.js's `Image` component with no configuration!\n\n\u003e Because the image component has features, like image optimization, configured by options that require the Next.js config file to be read and processed by the framework and there is no public function exposed by Next.js to resolve and those options, it is not possible to support those features stably.\n\u003e\n\u003e If you want to see this better supported, feel free to contribute to the [discussion on Next.js's side](https://github.com/vercel/next.js/discussions/40891) or [the discussion on our side](https://github.com/RyanClementsHax/storybook-addon-next/discussions/119)\n\n#### Local Images\n\n[Local images](https://nextjs.org/docs/basic-features/image-optimization#local-images) work just fine with this addon! Keep in mind that this feature was [only added in Next.js v11](https://nextjs.org/blog/next-11#automatic-size-detection-local-images).\n\n```js\nimport Image from 'next/image'\nimport profilePic from '../public/me.png'\n\nfunction Home() {\n  return (\n    \u003c\u003e\n      \u003ch1\u003eMy Homepage\u003c/h1\u003e\n      \u003cImage\n        src={profilePic}\n        alt=\"Picture of the author\"\n        // width={500} automatically provided\n        // height={500} automatically provided\n        // blurDataURL=\"../public/me.png\" set to equal the image itself (for this addon)\n        // placeholder=\"blur\" // Optional blur-up while loading\n      /\u003e\n      \u003cp\u003eWelcome to my homepage!\u003c/p\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n#### Remote Images\n\n[Remote images](https://nextjs.org/docs/basic-features/image-optimization#remote-images) also work just fine!\n\n```js\nimport Image from 'next/image'\n\nexport default function Home() {\n  return (\n    \u003c\u003e\n      \u003ch1\u003eMy Homepage\u003c/h1\u003e\n      \u003cImage\n        src=\"/me.png\"\n        alt=\"Picture of the author\"\n        width={500}\n        height={500}\n      /\u003e\n      \u003cp\u003eWelcome to my homepage!\u003c/p\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n#### Optimization\n\nAll Next.js `Image`s are automatically [unoptimized](https://nextjs.org/docs/api-reference/next/image#unoptimized) for you.\n\nIf [placeholder=\"blur\"](https://nextjs.org/docs/api-reference/next/image#placeholder) is used, the [blurDataURL](https://nextjs.org/docs/api-reference/next/image#blurdataurl) used is the [src](https://nextjs.org/docs/api-reference/next/image#src) of the image (thus effectively disabling the placeholder).\n\nSee [this issue](https://github.com/vercel/next.js/issues/18393) for more discussion on how Next.js `Image`s are handled for Storybook.\n\n#### AVIF\n\nThis format is not supported by this addon yet. Feel free to [open up an issue](https://github.com/RyanClementsHax/storybook-addon-next/issues) if this is something you want to see.\n\n### Next.js Routing\n\nThis solution is heavily based on [storybook-addon-next-router](https://github.com/lifeiscontent/storybook-addon-next-router) so a big thanks to `lifeiscontent` for providing a good solution that this addon could work off of.\n\n[Next.js's router](https://nextjs.org/docs/routing/introduction) is automatically stubbed for you so that when the router is interacted with, all of its interactions are automatically logged to the [Storybook actions tab](https://storybook.js.org/docs/react/essentials/actions) if you have the actions addon.\n\n#### Overriding defaults\n\nPer-story overrides can be done by adding a `nextRouter` property onto the story [parameters](https://storybook.js.org/docs/react/writing-stories/parameters). The addon will shallowly merge whatever you put here into the router.\n\n```js\nimport SomeComponentThatUsesTheRouter from \"./SomeComponentThatUsesTheRouter\";\n\nexport default {\n  title: \"My Story\",\n};\n\n// if you have the actions addon\n// you can click the links and see the route change events there\nexport const Example = () =\u003e \u003cSomeComponentThatUsesTheRouter /\u003e;\n\nExample.parameters: {\n  nextRouter: {\n    path: \"/profile/[id]\",\n    asPath: \"/profile/ryanclementshax\",\n    query: {\n      id: \"ryanclementshax\"\n    }\n  }\n}\n```\n\nSee this [example](https://github.com/RyanClementsHax/storybook-addon-next/blob/main/examples/nextv12/stories/pages/nextjsRouting.stories.jsx) for a reference.\n\n#### Global Defaults\n\nGlobal defaults can be set in [preview.js](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering) and will be shallowly merged with the default router.\n\n```js\nexport const parameters = {\n  nextRouter: {\n    path: '/some-default-path',\n    asPath: '/some-default-path',\n    query: {}\n  }\n}\n```\n\nSee this [example](https://github.com/RyanClementsHax/storybook-addon-next/blob/main/examples/nextv12/.storybook/preview.js) for a reference.\n\n#### Default Router\n\nThe default values on the stubbed router are as follows (see [globals](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#globals) for more details on how globals work)\n\n```ts\nconst defaultRouter = {\n  locale: context?.globals?.locale,\n  route: '/',\n  pathname: '/',\n  query: {},\n  asPath: '/',\n  push(...args: unknown[]) {\n    action('nextRouter.push')(...args)\n    return Promise.resolve(true)\n  },\n  replace(...args: unknown[]) {\n    action('nextRouter.replace')(...args)\n    return Promise.resolve(true)\n  },\n  reload(...args: unknown[]) {\n    action('nextRouter.reload')(...args)\n  },\n  back(...args: unknown[]) {\n    action('nextRouter.back')(...args)\n  },\n  prefetch(...args: unknown[]) {\n    action('nextRouter.prefetch')(...args)\n    return Promise.resolve()\n  },\n  beforePopState(...args: unknown[]) {\n    action('nextRouter.beforePopState')(...args)\n  },\n  events: {\n    on(...args: unknown[]) {\n      action('nextRouter.events.on')(...args)\n    },\n    off(...args: unknown[]) {\n      action('nextRouter.events.off')(...args)\n    },\n    emit(...args: unknown[]) {\n      action('nextRouter.events.emit')(...args)\n    }\n  },\n  isFallback: false\n}\n```\n\n#### Actions Integration Caveats\n\nIf you override a function, you lose the automatic action tab integration and have to build it out yourself.\n\n```js\nexport const parameters = {\n  nextRouter: {\n    push() {\n      // we lose the default implementation that logs the action into the action tab\n    }\n  }\n}\n```\n\nDoing this yourself looks something like this (make sure you install the `@storybook/addon-actions` package):\n\n```js\nimport { action } from '@storybook/addon-actions'\n\nexport const parameters = {\n  nextRouter: {\n    push(...args) {\n      // custom logic can go here\n      // this logs to the actions tab\n      action('nextRouter.push')(...args)\n      // return whatever you want here\n      return Promise.resolve(true)\n    }\n  }\n}\n```\n\n### Sass/Scss\n\n[Global sass/scss stylesheets](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support) are supported without any additional configuration as well. Just import them into [preview.js](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering)\n\n```js\nimport '../styles/globals.scss'\n```\n\nThis will automatically include any of your [custom sass configurations](https://nextjs.org/docs/basic-features/built-in-css-support#customizing-sass-options) in your `next.config.js` file.\n\n\u003e Right now only the `.js` extension of the Next.js config is supported, not `.mjs`. See [next.config.js](#nextconfigjs) for more details.\n\n```js\nconst path = require('path')\n\nmodule.exports = {\n  // any options here are included in sass compilation for your stories\n  sassOptions: {\n    includePaths: [path.join(__dirname, 'styles')]\n  }\n}\n```\n\n### Css/Sass/Scss Modules\n\nNext.js supports [css modules](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css) out of the box so this addon supports it too.\n\n```js\n// this import works just fine in Storybook now\nimport styles from './Button.module.css'\n// sass/scss is also supported\n// import styles from './Button.module.scss'\n// import styles from './Button.module.sass'\n\nexport function Button() {\n  return (\n    \u003cbutton type=\"button\" className={styles.error}\u003e\n      Destroy\n    \u003c/button\u003e\n  )\n}\n```\n\n### Styled JSX\n\nThe built in CSS in JS solution for Next.js is [styled-jsx](https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js), and this addon supports that out of the box too, zero config.\n\n```js\n// This works just fine in Storybook with this addon\nfunction HelloWorld() {\n  return (\n    \u003cdiv\u003e\n      Hello world\n      \u003cp\u003escoped!\u003c/p\u003e\n      \u003cstyle jsx\u003e{`\n        p {\n          color: blue;\n        }\n        div {\n          background: red;\n        }\n        @media (max-width: 600px) {\n          div {\n            background: blue;\n          }\n        }\n      `}\u003c/style\u003e\n      \u003cstyle global jsx\u003e{`\n        body {\n          background: black;\n        }\n      `}\u003c/style\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default HelloWorld\n```\n\nYou can use your own babel config too. This is an example of how you can customize styled-jsx.\n\n```json\n// .babelrc or whatever config file you use\n{\n  \"presets\": [\n    [\n      \"next/babel\",\n      {\n        \"styled-jsx\": {\n          \"plugins\": [\"@styled-jsx/plugin-sass\"]\n        }\n      }\n    ]\n  ]\n}\n```\n\nIf you use a monorepo, you may need to add the babel config yourself to your storybook project. Just add a babel config to your storybook project with the following contents to get started.\n\n```json\n{\n  \"presets\": [\"next/babel\"]\n}\n```\n\n### Postcss\n\nNext.js lets you [customize postcss config](https://nextjs.org/docs/advanced-features/customizing-postcss-config#default-behavior). Thus this addon will automatically handle your postcss config for you.\n\nThis allows for cool things like zero config tailwindcss! See the [with-tailwindcss example](https://github.com/RyanClementsHax/storybook-addon-next/blob/main/examples/with-tailwindcss/README.md) for reference! Its a clone of [Next.js's tailwindcss example](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss) set up with storybook and this addon.\n\n### Absolute Imports\n\nGoodbye `../`! Absolute imports from the root directory work just fine with this addon.\n\n```js\n// All good!\nimport Button from 'components/button'\n// Also good!\nimport styles from 'styles/HomePage.module.css'\n\nexport default function HomePage() {\n  return (\n    \u003c\u003e\n      \u003ch1 className={styles.title}\u003eHello World\u003c/h1\u003e\n      \u003cButton /\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n```js\n// preview.js\n\n// Also ok in preview.js!\nimport 'styles/globals.scss'\n\n// ...\n```\n\n### Runtime Config\n\nNext.js allows for [Runtime Configuration](https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration) which lets you import a handy `getConfig` function to get certain configuration defined in your `next.config.js` file at runtime.\n\nIn the context of Storybook with this addon, you can expect Next.js's [Runtime Configuration](https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration) feature to work just fine.\n\nNote, because Storybook doesn't server render your components, your components will only see what they normally see on the client side (i.e. they won't see `serverRuntimeConfig` but will see `publicRuntimeConfig`).\n\nFor example, consider the following Next.js config:\n\n```js\n// next.config.js\nmodule.exports = {\n  serverRuntimeConfig: {\n    mySecret: 'secret',\n    secondSecret: process.env.SECOND_SECRET // Pass through env variables\n  },\n  publicRuntimeConfig: {\n    staticFolder: '/static'\n  }\n}\n```\n\nCalls to `getConfig` would return the following object when called within Storybook:\n\n```json\n{\n  \"serverRuntimeConfig\": {},\n  \"publicRuntimeConfig\": {\n    \"staticFolder\": \"/static\"\n  }\n}\n```\n\n### Custom Webpack Config\n\nNext.js comes with a lot of things for free out of the box like sass support, but sometimes we add [custom webpack config modifications to Next.js](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config). This addon takes care of most of the webpack modifications you would want to add. If Next.js supports a feature out of the box, then this addon will make that feature work out of the box in Storybook. If Next.js doesn't support something out of the box, but makes it easy to configure, then this addon will do the same for that thing for Storybook. If you find something that you still need to configure webpack to get a Next.js feature to work in Storybook after adding this addon, this is likely a bug and please feel free to [open up an issue](https://github.com/RyanClementsHax/storybook-addon-next/issues).\n\nAny webpack modifications desired for Storybook should be made in [.storybook/main.js](https://storybook.js.org/docs/react/configure/webpack) according to Storybook's docs.\n\nNote: Not all webpack modifications are copy/paste-able between `next.config.js` and `.storybook/main.js`. It is recommended to do your reasearch on how to properly make your modifcation to Storybook's webpack config and on how [webpack works](https://webpack.js.org/concepts/).\n\nPlease feel free to contribute an [example](https://github.com/RyanClementsHax/storybook-addon-next/blob/main/examples) to help out the community.\n\nBelow is an example of how to add svgr support to Storybook with this addon. The full example can be found [here](https://github.com/RyanClementsHax/storybook-addon-next/blob/main/examples/svgr/README.md).\n\n```js\n// .storybook/main.js\nmodule.exports = {\n  // other config omitted for brevity\n  webpackFinal: async config =\u003e {\n    // this modifies the existing image rule to exclude .svg files\n    // since we want to handle those files with @svgr/webpack\n    const imageRule = config.module.rules.find(rule =\u003e rule.test.test('.svg'))\n    imageRule.exclude = /\\.svg$/\n\n    // configure .svg files to be loaded with @svgr/webpack\n    config.module.rules.push({\n      test: /\\.svg$/,\n      use: ['@svgr/webpack']\n    })\n\n    return config\n  }\n}\n```\n\n### Typescript\n\nStorybook handles most [Typescript](https://www.typescriptlang.org/) configurations, but this addon adds additional support for Next.js's support for [Absolute Imports and Module path aliases](https://nextjs.org/docs/advanced-features/module-path-aliases). In short, it takes into account your `tsconfig.json`'s [baseUrl](https://www.typescriptlang.org/tsconfig#baseUrl) and [paths](https://www.typescriptlang.org/tsconfig#paths). Thus, a `tsconfig.json` like the one below would work out of the box.\n\n```json\n{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@/components/*\": [\"components/*\"]\n    }\n  }\n}\n```\n\n### next.config.js\n\n#### ESM\n\nRight now the only supported config format for Next.js that this plugin supports is the commonjs version of the config (i.e. `next.config.js`). This is mostly because I haven't figured out how to require a `.mjs` file from a storybook addon (which is bound to commonjs modules as far as I know right now). If you are able to help, I'd love it if you could contribute to [this discussion](https://github.com/RyanClementsHax/storybook-addon-next/discussions/28) to get support for the `.mjs` version if such support is even possible.\n\n### Notes for Yarn v2 and v3 users\n\nIf you're using [Yarn](https://yarnpkg.com/) v2 or v3, you may run into issues where Storybook can't resolve `style-loader` or `css-loader`. For example, you might get errors like:\n\n`Module not found: Error: Can't resolve 'css-loader'`\\\n`Module not found: Error: Can't resolve 'style-loader'`\n\nThis is because those versions of Yarn have different package resolution rules than Yarn v1.x. If this is the case for you, just install the package directly.\n\n### FAQ\n\n#### Statically imported images won't load\n\nMake sure you are treating image imports the same way you treat them when using next image in normal development.\n\nBefore `storybook-addon-next`, image imports just imported the raw path to the image (e.g. `'static/media/stories/assets/plugin.svg'`). When using `storybook-addon-next` image imports work the \"Next.js way\" meaning that we now get an object when we import an image. For example:\n\n```json\n{\n  \"src\": \"static/media/stories/assets/plugin.svg\",\n  \"height\": 48,\n  \"width\": 48,\n  \"blurDataURL\": \"static/media/stories/assets/plugin.svg\"\n}\n```\n\nTherefore, if something in storybook isn't showing the image properly, make sure you expect the object to be returned from an import instead of just the asset path.\n\nSee [local images](https://nextjs.org/docs/basic-features/image-optimization#local-images) for more detail on how Next.js treats static image imports.\n\n#### This addon breaks when the .mjs extension for the next config is used\n\nRight now using `next.config.mjs` isn't supported by this addon. See [next.config.js](#nextconfigjs) for more details. Right now, it is required for you to use the `.js` extension instead. Feel free to help out on [this discussion](https://github.com/RyanClementsHax/storybook-addon-next/discussions/28) to get this supported.\n\n#### Module not found: Error: Can't resolve [package name]\n\nYou might get this if you're using Yarn v2 or v3. See [Notes for Yarn v2 and v3 users](#notes-for-yarn-v2-and-v3-users) for more details.\n\n## Similar Projects\n\n- [storybook-addon-next-router](https://github.com/lifeiscontent/storybook-addon-next-router)\n\n## Want to suggest additional features?\n\nI'm open to discussion. Feel free to [open up an issue](https://github.com/RyanClementsHax/storybook-addon-next/issues).\n\n## Didn't find what you were looking for?\n\nWas this documentation insufficient for you?\n\nWas it confusing?\n\nWas it ... dare I say ... inaccurate?\n\nIf any of the above describes your feelings of this documentation. Feel free to [open up an issue](https://github.com/RyanClementsHax/storybook-addon-next/issues).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanclementshax%2Fstorybook-addon-next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanclementshax%2Fstorybook-addon-next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanclementshax%2Fstorybook-addon-next/lists"}