Skip to content

Docs: Fix broken links in framework pages #33369

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jonniebigodes merged 3 commits into from
Dec 16, 2025
Merged

Docs: Fix broken links in framework pages #33369

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ab43b23
Docs: Fix broken links in framework pages
jonniebigodes Dec 16, 2025
c30a754
adjust path import
jonniebigodes Dec 16, 2025
fcc7d76
fix language for react native install snippet
jonniebigodes Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions docs/_snippets/ghp-github-action.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ name: Build and Publish Storybook to GitHub Pages
on:
push:
branches:
- "your-branch-name" # Use specific branch name
- 'your-branch-name' # Use specific branch name
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: "pages"
group: 'pages'
cancel-in-progress: false
jobs:
deploy:
Expand All @@ -25,8 +25,8 @@ jobs:
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: "20"
cache: "npm" # Adjust caching strategy and configuration if using other package managers
node-version: '20'
cache: 'npm' # Adjust caching strategy and configuration if using other package managers
- name: Install dependencies
run: npm ci # Replace with appropriate command if using other package managers
- name: Build Storybook
Expand All @@ -35,7 +35,7 @@ jobs:
- name: Upload Pages artifact
uses: actions/upload-pages-artifact@v3
with:
path: "storybook-static"
path: 'storybook-static'
# Deploy to Github Pages
- id: deploy
name: Deploy to GitHub Pages
Expand Down
3 changes: 2 additions & 1 deletion docs/_snippets/nextjs-styling-sass-config.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,10 @@ export default {
```

```ts filename="next.config.ts" language="ts" renderer="react"
import * as path from 'path';
import type { NextConfig } from 'next';

import * as path from 'node:path';

const config: NextConfig = {
// Any options here are included in Sass compilation for your stories
sassOptions: {
Expand Down
2 changes: 1 addition & 1 deletion docs/_snippets/nextjs-styling-sass-preview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ import '../styles/globals.scss';

```ts filename=".storybook/preview.ts" language="ts" renderer="react"
import '../styles/globals.scss';
```
```
2 changes: 1 addition & 1 deletion docs/_snippets/nextjs-styling-styled-jsx-component.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,4 +60,4 @@ function HelloWorld() {
}

export default HelloWorld;
```
```
2 changes: 1 addition & 1 deletion docs/_snippets/nextjs-styling-tailwind.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ import '../app/globals.css';

```ts filename=".storybook/preview.ts" language="ts" renderer="react"
import '../app/globals.css';
```
```
4 changes: 2 additions & 2 deletions docs/_snippets/react-native-web-vite-add-framework.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
```js filename=".storybook/main.js" renderer="react-native-web" language="js"
```js filename=".storybook/main.js" renderer="react" language="js"
export default {
addons: [
'@storybook/addon-react-native-web', // 👈 Remove the addon
Expand All @@ -8,7 +8,7 @@ export default {
};
```

```ts filename=".storybook/main.ts" renderer="react-native-web" language="ts"
```ts filename=".storybook/main.ts" renderer="react" language="ts"
import type { StorybookConfig } from '@storybook/react-native-web-vite';

const config: StorybookConfig = {
Expand Down
6 changes: 3 additions & 3 deletions docs/_snippets/react-native-web-vite-install.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
```shell renderer="react-native-web" language="js" packageManager="npm"
```shell renderer="common" language="sh" packageManager="npm"
npm install --save-dev @storybook/react-native-web-vite vite
```

```shell renderer="react-native-web" language="js" packageManager="pnpm"
```shell renderer="common" language="sh" packageManager="pnpm"
pnpm add --save-dev @storybook/react-native-web-vite vite
```

```shell renderer="react-native-web" language="js" packageManager="yarn"
```shell renderer="common" language="sh" packageManager="yarn"
yarn add --dev @storybook/react-native-web-vite vite
```
7 changes: 3 additions & 4 deletions docs/get-started/frameworks/angular.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ To install Storybook in an existing Angular project, run this command in your pr

<CodeSnippets path="create-command.md" variant="new-users" copyEvent="CreateCommandCopy" />

You can then get started [writing stories](/docs/get-started/whats-a-story/), [running tests](/docs/writing-tests/) and [documenting your components](/docs/writing-docs/). For more control over the installation process, refer to the [installation guide](/docs/install/).
You can then get started [writing stories](../whats-a-story.mdx), [running tests](../../writing-tests/index.mdx) and [documenting your components](../../writing-docs/index.mdx). For more control over the installation process, refer to the [installation guide](../install.mdx).
Copy link
Member

@Sidnioulz Sidnioulz Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did find it harder for the 404 detection tool I tried to work with relative paths. I'm also myself not so keen to use relative paths because when we move a file around:

  • the links in that file all change
  • the links to that file also change, and those can be harder to find and change than a unique absolute path

Copy link
Contributor Author

@jonniebigodes jonniebigodes Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hear you and we need to invest in a proper way to vet the links and avoid situations like and safeguard us.


### Requirements

Expand Down Expand Up @@ -46,7 +46,7 @@ You will find the output in the configured `outputDir` (default is `dist/storybo

## Configure

To make the most out of Storybook in your Angular project, you can set up Compodoc integration and Storybook [decorators](/docs/writing-stories/decorators/) based on your project needs.
To make the most out of Storybook in your Angular project, you can set up Compodoc integration and Storybook [decorators](../../writing-stories/decorators.mdx) based on your project needs.

### Compodoc

Expand Down Expand Up @@ -122,7 +122,7 @@ export default preview;

### Application-wide providers

If your component relies on application-wide providers, like the ones defined by [`BrowserAnimationsModule`](https://angular.dev/api/platform-browser/animations/BrowserAnimationsModule) or any other modules that use the forRoot pattern to provide a [`ModuleWithProviders`](https://angular.dev/api/core/ModuleWithProviders), you can apply the `applicationConfig` [decorator](../../writing-stories/decorators.mdx) to all stories for that component. This will provide them with the [bootstrapApplication function](https://angular.io/guide/standalone-components#configuring-dependency-injection), used to bootstrap the component in Storybook.
If your component relies on application-wide providers, like the ones defined by [`BrowserAnimationsModule`](https://angular.dev/api/platform-browser/animations/BrowserAnimationsModule) or any other modules that use the forRoot pattern to provide a [`ModuleWithProviders`](https://angular.dev/api/core/ModuleWithProviders), you can apply the `applicationConfig` [decorator](../../writing-stories/decorators.mdx) to all stories for that component. This will provide them with the [bootstrapApplication function](https://angular.dev/api/platform-browser/bootstrapApplication), used to bootstrap the component in Storybook.

```ts title="ChipsModule.stories.ts"
import { Meta, applicationConfig, StoryObj } from '@storybook/angular';
Expand Down Expand Up @@ -203,7 +203,6 @@ export const WithCustomProvider: Story = {
};
```


## FAQ

### How do I manually install the Angular framework?
Expand Down
89 changes: 44 additions & 45 deletions docs/get-started/frameworks/nextjs-vite.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,15 @@ sidebar:
title: Next.js (Vite)
---

Storybook for Next.js (Vite) is the **recommended** [framework](../../contribute/framework.mdx) for developing and testing UI components in isolation for [Next.js](https://nextjs.org/) applications. It uses [Vite](https://vitejs.dev/) for faster builds, better performance and [Storybook Testing](https://storybook.js.org/docs/writing-tests) support.
Storybook for Next.js (Vite) is the **recommended** [framework](../../contribute/framework.mdx) for developing and testing UI components in isolation for [Next.js](https://nextjs.org/) applications. It uses [Vite](https://vitejs.dev/) for faster builds, better performance and [Storybook Testing](../../writing-tests/index.mdx) support.

## Install

To install Storybook in an existing Next.js project, run this command in your project's root directory:

<CodeSnippets path="create-command.md" variant="new-users" copyEvent="CreateCommandCopy" />

You can then get started [writing stories](/docs/get-started/whats-a-story/), [running tests](/docs/writing-tests/) and [documenting your components](/docs/writing-docs/). For more control over the installation process, refer to the [installation guide](/docs/install/).

You can then get started [writing stories](../whats-a-story.mdx), [running tests](../../writing-tests/index.mdx) and [documenting your components](../../writing-docs/index.mdx). For more control over the installation process, refer to the [installation guide](../install.mdx).

### Requirements

Expand Down Expand Up @@ -56,9 +55,6 @@ To build Storybook, run:

You will find the output in the configured `outputDir` (default is `storybook-static`).




## Configure

Storybook for Next.js with Vite supports many Next.js features including:
Expand Down Expand Up @@ -410,54 +406,60 @@ const preview: Preview = {

[`next/head`](https://nextjs.org/docs/pages/api-reference/components/head) is supported out of the box. You can use it in your stories like you would in your Next.js application. Please keep in mind, that the Head `children` are placed into the head element of the iframe that Storybook uses to render your stories.

### Styling

#### Sass/Scss
## Next.js styling
Copy link
Member

@Sidnioulz Sidnioulz Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The idea behind the change of headers was to have all configuration sections under "Configure".

The ## Configure section and intro paragraphs might be redundant if we bring all its children down one level.


[Global Sass/Scss stylesheets](https://nextjs.org/docs/pages/building-your-application/styling/sass) are supported without any additional configuration as well. Just import them into [`.storybook/preview.js|ts`](../../configure/index.mdx#configure-story-rendering)
### Sass/Scss

```js title=".storybook/preview.js|ts"
import '../styles/globals.scss';
```
[Global Sass/SCSS stylesheets](https://nextjs.org/docs/pages/building-your-application/styling/sass) are also supported without any additional configuration. Just import them into [the preview config file](../../configure/index.mdx#configure-story-rendering).

This will automatically include any of your [custom Sass configurations](https://nextjs.org/docs/pages/building-your-application/styling/sass#customizing-sass-options) in your `next.config.js` file.
{/* prettier-ignore-start */}

```js title="next.config.js"
import * as path from 'path';
<CodeSnippets path="nextjs-styling-sass-preview.md" />

export default {
// Any options here are included in Sass compilation for your stories
sassOptions: {
includePaths: [path.join(process.cwd(), 'styles')],
},
};
```
{/* prettier-ignore-end */}

This will automatically include any of your [custom Sass configurations](https://nextjs.org/docs/pages/building-your-application/styling/sass#customizing-sass-options) in your Next.js config file.

#### CSS/Sass/Scss Modules
{/* prettier-ignore-start */}

<CodeSnippets path="nextjs-styling-sass-config.md" />

{/* prettier-ignore-end */}

### CSS/Sass/Scss Modules

[CSS modules](https://nextjs.org/docs/pages/building-your-application/styling/css-modules) work as expected.

```jsx title="src/components/Button.jsx"
// This import will work in Storybook
import styles from './Button.module.css';
// Sass/Scss is also supported
// import styles from './Button.module.scss'
// import styles from './Button.module.sass'
{/* prettier-ignore-start */}

export function Button() {
return (
<button type="button" className={styles.error}>
Destroy
</button>
);
}
```
<CodeSnippets path="nextjs-styling-css-modules.md" />

{/* prettier-ignore-end */}

#### PostCSS
### Styled JSX

Next.js lets you [customize PostCSS config](https://nextjs.org/docs/pages/building-your-application/configuring/post-css). Thus this framework will automatically handle your PostCSS config for you.
The built-in CSS-in-JS solution for Next.js is [styled-jsx](https://nextjs.org/docs/pages/building-your-application/styling/css-in-js), and this framework supports that out of the box, too, with zero config.

{/* prettier-ignore-start */}

<CodeSnippets path="nextjs-styling-styled-jsx-component.md" />

{/* prettier-ignore-end */}

### Tailwind

This allows for cool things like zero-config Tailwind! (See [Next.js' example](https://github.com/vercel/next.js/tree/canary/packages/create-next-app/templates/default-tw))
Tailwind in Next.js [is supported via PostCSS](https://nextjs.org/docs/app/getting-started/css#tailwind-css). Storybook will automatically handle the PostCSS config for you, including any custom PostCSS configuration, so that you can import your global CSS directly into [the preview config file](../../configure/index.mdx#configure-story-rendering):

{/* prettier-ignore-start */}

<CodeSnippets path="nextjs-styling-tailwind.md" />

{/* prettier-ignore-end */}

### PostCSS

Next.js lets you [customize PostCSS config](https://nextjs.org/docs/pages/building-your-application/configuring/post-css). Thus this framework will automatically handle your PostCSS config for you.

### Imports
#### Absolute imports
Expand Down Expand Up @@ -638,7 +640,7 @@ To enable this set the `experimentalRSC` feature flag in your `.storybook/main.j

Setting this flag automatically wraps your story in a [Suspense](https://react.dev/reference/react/Suspense) wrapper, which is able to render asynchronous components in NextJS's version of React.

If this wrapper causes problems in any of your existing stories, you can selectively disable it using the `react.rsc` [parameter](https://storybook.js.org/docs/writing-stories/parameters) at the global/component/story level:
If this wrapper causes problems in any of your existing stories, you can selectively disable it using the `react.rsc` [parameter](../../writing-stories/parameters.mdx) at the global/component/story level:

{/* prettier-ignore-start */}

Expand All @@ -654,7 +656,6 @@ In the future we will provide better mocking support in Storybook and support fo

## FAQ


### How do I migrate from the `nextjs` (Webpack 5) addon?

#### Automatic migration
Expand All @@ -673,7 +674,7 @@ This automigration tool performs the following actions:

<Callout variant="info">

If your project has custom Webpack configurations in `.storybook/main.js|ts` (via `webpackFinal`), you'll need to migrate those to Vite configuration (via `viteFinal`) after running this automigration. See the [Vite builder documentation](../builders/vite.mdx#migrating-from-webpack) for more information.
If your project has custom Webpack configurations in `.storybook/main.js|ts` (via `webpackFinal`), you'll need to migrate those to Vite configuration (via `viteFinal`) after running this automigration. See the [Vite builder documentation](../../builders/vite.mdx#migrating-from-webpack) for more information.

</Callout>

Expand Down Expand Up @@ -711,8 +712,6 @@ Finally, if you were using Storybook plugins to integrate with Next.js, those ar

{/* prettier-ignore-end */}



### Stories for pages/components which fetch data

Next.js pages can fetch data directly within server components in the `app` directory, which often include module imports that only run in a node environment. This does not (currently) work within Storybook, because if you import from a Next.js page file containing those node module imports in your stories, your Storybook's Vite build will crash because those modules will not run in a browser. To get around this, you can extract the component in your page file into a separate file and import that pure component in your stories. Or, if that's not feasible for some reason, you can [configure Vite to handle those modules](https://vitejs.dev/config/dep-optimization-options.html#optimizedeps-exclude) in your Storybook's [`viteFinal` configuration](../../builders/vite.mdx#configuration).
Expand Down
28 changes: 6 additions & 22 deletions docs/get-started/frameworks/nextjs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ sidebar:

Storybook for Next.js (Webpack) is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [Next.js](https://nextjs.org/) applications using [Webpack 5](https://webpack.js.org/).


<Callout variant="info">

**We recommend using [`@storybook/nextjs-vite`](./nextjs-vite.mdx)** for most Next.js projects. The Vite-based framework is faster, more modern, and offers better support for testing features.
Expand All @@ -27,8 +26,7 @@ To install Storybook in an existing Next.js project, run this command in your pr

The command will prompt you to choose between this framework and [`@storybook/nextjs-vite`](./nextjs-vite.mdx). We recommend the Vite-based framework ([learn why](./nextjs-vite.mdx#choose-between-vite-and-webpack)).

You can then get started [writing stories](/docs/get-started/whats-a-story/), [running tests](/docs/writing-tests/) and [documenting your components](/docs/writing-docs/). For more control over the installation process, refer to the [installation guide](/docs/install/).

You can then get started [writing stories](../whats-a-story.mdx), [running tests](../../writing-tests/index.mdx) and [documenting your components](../../writing-docs/index.mdx). For more control over the installation process, refer to the [installation guide](../install.mdx).

### Requirements

Expand All @@ -54,9 +52,6 @@ To build Storybook, run:

You will find the output in the configured `outputDir` (default is `storybook-static`).




## Configure

Storybook for Next.js with Vite supports many Next.js features including:
Expand All @@ -70,16 +65,6 @@ Storybook for Next.js with Vite supports many Next.js features including:
* 🎭 [Module mocking](#mocking-modules)
* ☁️ [React Server Component (experimental)](#react-server-components-rsc)











### Next.js's Image component

This framework allows you to use Next.js's [next/image](https://nextjs.org/docs/pages/api-reference/components/image) with no configuration.
Expand Down Expand Up @@ -420,7 +405,7 @@ const preview: Preview = {

### Sass/Scss

[Global Sass/Scss stylesheets](https://nextjs.org/docs/pages/building-your-application/styling/sass) are supported without any additional configuration as well. Just import them into [the preview config file](../../configure/index.mdx#configure-story-rendering)
[Global Sass/SCSS stylesheets](https://nextjs.org/docs/pages/building-your-application/styling/sass) are also supported without any additional configuration. Just import them into [the preview config file](../../configure/index.mdx#configure-story-rendering).

{/* prettier-ignore-start */}

Expand Down Expand Up @@ -448,15 +433,15 @@ This will automatically include any of your [custom Sass configurations](https:/

### Styled JSX

The built in CSS-in-JS solution for Next.js is [styled-jsx](https://nextjs.org/docs/pages/building-your-application/styling/css-in-js), and this framework supports that out of the box too, zero config.
The built-in CSS-in-JS solution for Next.js is [styled-jsx](https://nextjs.org/docs/pages/building-your-application/styling/css-in-js), and this framework supports that out of the box, too, with zero config.

{/* prettier-ignore-start */}

<CodeSnippets path="nextjs-styling-styled-jsx-component.md" />

{/* prettier-ignore-end */}

You can use your own babel config too. This is an example of how you can customize styled-jsx.
You can use your own Babel config, too. This is an example of how you can customize styled-jsx.

```jsonc
// .babelrc (or whatever config file you use)
Expand All @@ -476,8 +461,7 @@ You can use your own babel config too. This is an example of how you can customi

### Tailwind

Tailwind in Next.js [is supported via PostCSS](https://nextjs.org/docs/app/getting-started/css#tailwind-css). Storybook will automatically handle the PostCSS config for you, including any custom PostCSS configuration,
so you can just import your global CSS directly into [the preview config file](../../configure/index.mdx#configure-story-rendering):
Tailwind in Next.js [is supported via PostCSS](https://nextjs.org/docs/app/getting-started/css#tailwind-css). Storybook will automatically handle the PostCSS config for you, including any custom PostCSS configuration, so that you can import your global CSS directly into [the preview config file](../../configure/index.mdx#configure-story-rendering):

{/* prettier-ignore-start */}

Expand Down Expand Up @@ -674,7 +658,7 @@ To enable this set the `experimentalRSC` feature flag in your `.storybook/main.j

Setting this flag automatically wraps your story in a [Suspense](https://react.dev/reference/react/Suspense) wrapper, which is able to render asynchronous components in NextJS's version of React.

If this wrapper causes problems in any of your existing stories, you can selectively disable it using the `react.rsc` [parameter](https://storybook.js.org/docs/writing-stories/parameters) at the global/component/story level:
If this wrapper causes problems in any of your existing stories, you can selectively disable it using the `react.rsc` [parameter](../../writing-stories/parameters.mdx) at the global/component/story level:

{/* prettier-ignore-start */}

Expand Down
Loading