mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-08 11:11:53 +08:00
Update RSC API
- Per https://github.com/storybookjs/storybook/pull/25591 - `features.experimentalNextRSC` -> `features.experimentalRSC` - `parameters.nextjs.rsc` -> `parameters.react.rsc`
This commit is contained in:
parent
577cbdb516
commit
f99b6a3ff7
@ -709,18 +709,20 @@ Storybook handles most [Typescript](https://www.typescriptlang.org/) configurati
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## Experimental React Server Components (RSC)
|
## React Server Components (RSC)
|
||||||
|
|
||||||
|
(⚠️ **Experimental**)
|
||||||
|
|
||||||
If your app uses [React Server Components (RSC)](https://nextjs.org/docs/app/building-your-application/rendering/server-components), Storybook can render them in stories in the browser.
|
If your app uses [React Server Components (RSC)](https://nextjs.org/docs/app/building-your-application/rendering/server-components), Storybook can render them in stories in the browser.
|
||||||
|
|
||||||
To enable this set the `experimentalNextRSC` feature flag in your `.storybook/main.js|ts` config:
|
To enable this set the `experimentalRSC` feature flag in your `.storybook/main.js|ts` config:
|
||||||
|
|
||||||
<!-- prettier-ignore-start -->
|
<!-- prettier-ignore-start -->
|
||||||
|
|
||||||
<CodeSnippets
|
<CodeSnippets
|
||||||
paths={[
|
paths={[
|
||||||
'react/nextjs-next-rsc.js.mdx',
|
'react/rsc-feature-flag.js.mdx',
|
||||||
'react/nextjs-next-rsc.ts.mdx'
|
'react/rsc-feature-flag.ts.mdx'
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -728,14 +730,14 @@ To enable this set the `experimentalNextRSC` feature flag in your `.storybook/ma
|
|||||||
|
|
||||||
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.
|
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 `nextjs.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](https://storybook.js.org/docs/writing-stories/parameters) at the global/component/story level:
|
||||||
|
|
||||||
<!-- prettier-ignore-start -->
|
<!-- prettier-ignore-start -->
|
||||||
|
|
||||||
<CodeSnippets
|
<CodeSnippets
|
||||||
paths={[
|
paths={[
|
||||||
'react/nextjs-next-rsc-in-meta.js.mdx',
|
'react/rsc-parameter-in-meta.js.mdx',
|
||||||
'react/nextjs-next-rsc-in-meta.ts.mdx'
|
'react/rsc-parameter-in-meta.ts.mdx'
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -869,12 +871,6 @@ Type:
|
|||||||
|
|
||||||
The router object that is passed to the `next/router` context. See [Next.js's router docs](https://nextjs.org/docs/pages/building-your-application/routing) for more details.
|
The router object that is passed to the `next/router` context. See [Next.js's router docs](https://nextjs.org/docs/pages/building-your-application/routing) for more details.
|
||||||
|
|
||||||
#### `rsc`
|
|
||||||
|
|
||||||
Type: `boolean`
|
|
||||||
|
|
||||||
If you opt in to the [experimental React Server Components (RSC) support](#experimental-react-server-components-rsc), you can use this parameter to opt out for specific stories for which it may cause problems.
|
|
||||||
|
|
||||||
### Options
|
### Options
|
||||||
|
|
||||||
You can pass an options object for additional configuration if needed:
|
You can pass an options object for additional configuration if needed:
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
export default {
|
export default {
|
||||||
// ...
|
// ...
|
||||||
features: {
|
features: {
|
||||||
experimentalNextRSC: true,
|
experimentalRSC: true,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
```
|
```
|
@ -5,7 +5,7 @@ import { StorybookConfig } from '@storybook/nextjs';
|
|||||||
const config: StorybookConfig = {
|
const config: StorybookConfig = {
|
||||||
// ...
|
// ...
|
||||||
features: {
|
features: {
|
||||||
experimentalNextRSC: true,
|
experimentalRSC: true,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
@ -5,7 +5,7 @@ import MyServerComponent from './MyServerComponent';
|
|||||||
export default {
|
export default {
|
||||||
component: MyServerComponent,
|
component: MyServerComponent,
|
||||||
parameters: {
|
parameters: {
|
||||||
nextjs: { rsc: false },
|
react: { rsc: false },
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
```
|
```
|
@ -7,7 +7,7 @@ import MyServerComponent from './MyServerComponent';
|
|||||||
const meta = {
|
const meta = {
|
||||||
component: MyServerComponent,
|
component: MyServerComponent,
|
||||||
parameters: {
|
parameters: {
|
||||||
nextjs: { rsc: false },
|
react: { rsc: false },
|
||||||
},
|
},
|
||||||
} satisfies Meta<typeof MyServerComponent>;
|
} satisfies Meta<typeof MyServerComponent>;
|
||||||
export default meta;
|
export default meta;
|
@ -7,7 +7,7 @@ import MyServerComponent from './MyServerComponent';
|
|||||||
const meta: Meta<typeof MyServerComponent> = {
|
const meta: Meta<typeof MyServerComponent> = {
|
||||||
component: MyServerComponent,
|
component: MyServerComponent,
|
||||||
parameters: {
|
parameters: {
|
||||||
nextjs: { rsc: false },
|
react: { rsc: false },
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
export default meta;
|
export default meta;
|
Loading…
x
Reference in New Issue
Block a user