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