mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-08 03:11:49 +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.
|
||||
|
||||
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 -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/nextjs-next-rsc.js.mdx',
|
||||
'react/nextjs-next-rsc.ts.mdx'
|
||||
'react/rsc-feature-flag.js.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.
|
||||
|
||||
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 -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/nextjs-next-rsc-in-meta.js.mdx',
|
||||
'react/nextjs-next-rsc-in-meta.ts.mdx'
|
||||
'react/rsc-parameter-in-meta.js.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.
|
||||
|
||||
#### `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
|
||||
|
||||
You can pass an options object for additional configuration if needed:
|
||||
|
@ -3,7 +3,7 @@
|
||||
export default {
|
||||
// ...
|
||||
features: {
|
||||
experimentalNextRSC: true,
|
||||
experimentalRSC: true,
|
||||
},
|
||||
};
|
||||
```
|
@ -5,7 +5,7 @@ import { StorybookConfig } from '@storybook/nextjs';
|
||||
const config: StorybookConfig = {
|
||||
// ...
|
||||
features: {
|
||||
experimentalNextRSC: true,
|
||||
experimentalRSC: true,
|
||||
},
|
||||
};
|
||||
|
@ -5,7 +5,7 @@ import MyServerComponent from './MyServerComponent';
|
||||
export default {
|
||||
component: MyServerComponent,
|
||||
parameters: {
|
||||
nextjs: { rsc: false },
|
||||
react: { rsc: false },
|
||||
},
|
||||
};
|
||||
```
|
@ -7,7 +7,7 @@ import MyServerComponent from './MyServerComponent';
|
||||
const meta = {
|
||||
component: MyServerComponent,
|
||||
parameters: {
|
||||
nextjs: { rsc: false },
|
||||
react: { rsc: false },
|
||||
},
|
||||
} satisfies Meta<typeof MyServerComponent>;
|
||||
export default meta;
|
@ -7,7 +7,7 @@ import MyServerComponent from './MyServerComponent';
|
||||
const meta: Meta<typeof MyServerComponent> = {
|
||||
component: MyServerComponent,
|
||||
parameters: {
|
||||
nextjs: { rsc: false },
|
||||
react: { rsc: false },
|
||||
},
|
||||
};
|
||||
export default meta;
|
Loading…
x
Reference in New Issue
Block a user