Storybook で next-intl の言語切り替えや useTlanslations を動かすためのメモ

Storybook を用いて開発を行うときに詰まったので忘備録。

前提として

• nextjs / app router
• next-intl
• storybook

という構成。

要点は

• NextIntlClientProvider を使うこと
• useMessage を使わずに自前で message を組み立てること
• 自前で locale の設定を行える口を作る

の2点である。
useMessage が 動かないので、本体の開発と同じノリでやると失敗するので注意。
なので decorator で NextIntlClientProvider を使う.

また、locale の値を通すために globalType を経由して設定する。
こうすることでおそらく開発可能。

RSC でも挙動を確認できたので多分大丈夫。

import type { Preview } from '@storybook/react';
import React, { useEffect } from 'react';
import { NextIntlClientProvider } from 'next-intl';
import ja from '../src/locales/ja.json';
import en from '../src/locales/en.json';

const withIntl = (Story, context) => {
  const locale = context.globals.locale;

  return (
    <NextIntlClientProvider locale={locale} messages={locale === 'ja' ? ja : en}>
      <Story />
    </NextIntlClientProvider>
  );
};

export const globalTypes = {
  locale: {
    name: 'Locale',
    description: 'Internationalization locale',
    defaultValue: 'ja',
    toolbar: {
      icon: 'globe',
      items: [
        { value: 'ja', title: '日本語' },
        { value: 'en', title: 'English' },
      ],
      showName: true,
    },
  },
};

const preview: Preview = {
  parameters: {
    nextjs: {
      appDirectory: true,
    },
  },
  decorators: [withIntl],
};

export default preview;