diff --git a/docs/src/pages/docs/workflows/storybook.mdx b/docs/src/pages/docs/workflows/storybook.mdx index a83b32a7a..7050c57f2 100644 --- a/docs/src/pages/docs/workflows/storybook.mdx +++ b/docs/src/pages/docs/workflows/storybook.mdx @@ -3,9 +3,46 @@ import Image from 'next/image'; # Storybook integration for `next-intl` -[Storybook](https://storybook.js.org/) is a tool for developing UI components in isolation. +[Storybook](https://storybook.js.org/) is a tool for developing UI components in isolation and can be used in combination with `next-intl` to handle components that rely on internationalization. -If you like to set up stories for components that use `next-intl`, you can use [`storybook-next-intl`](https://github.com/stevensacks/storybook-next-intl), a community-maintained addon that configures Storybook accordingly for you. +## Manual setup + +To set up Storybook for `next-intl`, you can configure a [global decorator](https://storybook.js.org/docs/writing-stories/decorators#global-decorators) that renders [`NextIntlClientProvider`](/docs/usage/configuration#nextintlclientprovider) to wrap your stories accordingly: + +```tsx filename=".storybook/preview.tsx" +import {Preview} from '@storybook/react'; +import defaultMessages from '../messages/en.json'; + +const preview: Preview = { + decorators: [ + (Story) => ( + + + + ) + ] +}; + +export default preview; +``` + +With this setup in place, you're able to render components that use hook-based APIs like `useTranslations`. + +Note that support for async Server Components is currently [experimental](https://storybook.js.org/docs/get-started/frameworks/nextjs#react-server-components-rsc) in Storybook and might require additional configuration. + + + +**Tip:** If you declare components that render as Server Components in your app via [non-async components](/docs/environments/server-client-components#shared-components), these components can render as Client Components in Storybook and will consume configuration from `NextIntlClientProvider`. + + + +## `storybook-next-intl` + +Alternatively to setting up the global decorator yourself, you can use [`storybook-next-intl`](https://github.com/stevensacks/storybook-next-intl), a community-maintained addon that configures Storybook accordingly for you. **Features** @@ -19,9 +56,3 @@ If you like to set up stories for components that use `next-intl`, you can use [ height={1128} alt="Storybook integration for next-intl" /> - - - -**Tip:** If you declare components that render as Server Components in your app via non-async functions, these components can render as Client Components in Storybook and will consume configuration from `NextIntlClientProvider` (see also: [Non-async components](/docs/environments/server-client-components#shared-components)). - - diff --git a/docs/src/pages/docs/workflows/vscode-integration.mdx b/docs/src/pages/docs/workflows/vscode-integration.mdx index d0848f3be..b8d7f73dc 100644 --- a/docs/src/pages/docs/workflows/vscode-integration.mdx +++ b/docs/src/pages/docs/workflows/vscode-integration.mdx @@ -37,7 +37,7 @@ These extensions are known to support `next-intl`: - Inline annotations - Inline message editing - [Message linting](https://inlang.com/m/r7kp499g/app-inlang-ideextension#message-linting?ref=next-intl) -- Integration with other parts of the inlang ecosystem like [the Fink editor](https://inlang.com/m/tdozzpar/app-inlang-editor?ref=next-intl) or [the inlang CLI](https://inlang.com/m/2qj2w8pu/app-inlang-cli?ref=next-intl) +- Integration with other parts of the inlang ecosystem like [the inlang CLI](https://inlang.com/m/2qj2w8pu/app-inlang-cli?ref=next-intl) **Setup:**