Skip to content

Commit

Permalink
Update RSC API
Browse files Browse the repository at this point in the history
- Per #25591
- `features.experimentalNextRSC` -> `features.experimentalRSC`
- `parameters.nextjs.rsc` -> `parameters.react.rsc`
  • Loading branch information
kylegach committed Jan 17, 2024
1 parent a9c665b commit 6a78a46
Show file tree
Hide file tree
Showing 6 changed files with 14 additions and 18 deletions.
22 changes: 9 additions & 13 deletions docs/get-started/nextjs.md
Original file line number Diff line number Diff line change
Expand Up @@ -709,33 +709,35 @@ 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'
]}
/>

<!-- prettier-ignore-end -->

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'
]}
/>

Expand Down Expand Up @@ -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:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
export default {
// ...
features: {
experimentalNextRSC: true,
experimentalRSC: true,
},
};
```
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { StorybookConfig } from '@storybook/nextjs';
const config: StorybookConfig = {
// ...
features: {
experimentalNextRSC: true,
experimentalRSC: true,
},
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import MyServerComponent from './MyServerComponent';
export default {
component: MyServerComponent,
parameters: {
nextjs: { rsc: false },
react: { rsc: false },
},
};
```
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 6a78a46

Please sign in to comment.