next-intl 的 Storybook 集成
Storybook 是一个用于在隔离环境中开发 UI 组件的工具，可以与 next-intl 结合使用，处理依赖国际化的组件。
手动设置
要为 next-intl 设置 Storybook，你可以配置一个全局装饰器，渲染 NextIntlClientProvider，以相应地包裹你的故事：
.storybook/preview.tsx
import {Preview} from '@storybook/react';
import defaultMessages from '../messages/en.json';
const preview: Preview = {
decorators: [
(Story) => (
<NextIntlClientProvider
locale="en"
messages={defaultMessages}
// ... 可能还有其它配置
>
<Story />
</NextIntlClientProvider>
)
]
};
export default preview;配置完成后，你可以渲染使用基于 hook API 如 useTranslations 的组件。
请注意，Storybook 对异步服务端组件的支持目前为实验性，可能需要额外配置。
💡
提示： 如果你在应用中通过非异步组件声明了以服务端组件方式渲染的组件，这些组件在 Storybook 中可以作为客户端组件渲染，并会消费来自 NextIntlClientProvider 的配置。
storybook-next-intl
除了自己设置全局装饰器，你还可以使用 storybook-next-intl，这是一个社区维护的插件，帮你自动为 Storybook 配置相关内容。
功能
- 全局设置
NextIntlClientProvider - 提供语言切换器，可测试不同语言环境下的组件
