Storybook integration for next-intl

Storybook 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.

Manual setup

To set up Storybook for next-intl, you can configure a global decorator that renders NextIntlClientProvider to wrap your stories accordingly:

import {Preview} from '@storybook/react'; import defaultMessages from '../messages/en.json';   const preview: Preview = {  decorators: [  (Story) => (  <NextIntlClientProvider  locale="en"  messages={defaultMessages}  // ... potentially other config  >  <Story />  </NextIntlClientProvider>  )  ] };   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 in Storybook and might require additional configuration.

storybook-next-intl

Alternatively to setting up the global decorator yourself, you can use storybook-next-intl, a community-maintained addon that configures Storybook accordingly for you.

Features

• Sets up NextIntlClientProvider globally for you
• Provides a locale switcher so you can test components with different locales