i18nのベースを作成

.storybook/preview.tsx

@@ -0,0 +1,25 @@
+import type { Preview } from '@storybook/react';
+import React from 'react';
+import { I18nextProvider } from 'react-i18next';
+import "../app/i18n/config";
+import i18n from '../app/i18n/config';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <I18nextProvider i18n={i18n}>
+        <Story />
+      </I18nextProvider>
+    ),
+  ],
+};
+
+export default preview;

app/components/Button/Button.stories.ts

@@ -28,26 +28,26 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   args: {
     primary: true,
-    label: 'Button',
+    label: 'common.button',
   },
 };
 
 export const Secondary: Story = {
   args: {
-    label: 'Button',
+    label: 'common.button',
   },
 };
 
 export const Large: Story = {
   args: {
     size: 'large',
-    label: 'Button',
+    label: 'common.button',
   },
 };
 
 export const Small: Story = {
   args: {
     size: 'small',
-    label: 'Button',
+    label: 'common.button',
   },
 };

app/components/Button/Button.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 
+import { useTranslation } from 'react-i18next';
 import './button.css';
 
 export interface ButtonProps {
@@ -24,14 +24,15 @@ export const Button = ({
   ...props
 }: ButtonProps) => {
   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  const { t } = useTranslation();
   return (
     <button
       type="button"
       className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
       style={{ backgroundColor }}
       {...props}
     >
-      {label}
+      {t(label)}
     </button>
   );
 };

app/i18n/config.ts

@@ -0,0 +1,27 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+import translation_en from "./en.json";
+import translation_ja from "./ja.json";
+
+const resources = {
+    ja: {
+      translation: translation_ja
+    },
+    en: {
+      translation: translation_en
+    }
+  };
+
+  i18n
+  .use(initReactI18next)
+  .init({
+    resources,
+    lng: "ja",
+    fallbackLng: "ja",
+    interpolation: {
+      escapeValue: false
+    }
+  });
+
+  export default i18n;

app/i18n/en.json

@@ -0,0 +1,10 @@
+{
+  "common": {
+    "button": "Button"
+  },
+  "card": {
+    "memberCard": {
+      "stack": "Stacks"
+    }
+  }
+}

app/i18n/ja.json

@@ -0,0 +1,10 @@
+{
+  "common": {
+    "button": "ボタン"
+  },
+  "card": {
+    "memberCard": {
+      "stack": "得意技術"
+    }
+  }
+}

app/root.tsx

@@ -9,6 +9,7 @@ import {
 
 import type { Route } from "./+types/root";
 import "./app.css";
+import "./i18n/config";
 
 export const links: Route.LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },

package.json

@@ -13,9 +13,11 @@
   "dependencies": {
     "@react-router/node": "^7.3.0",
     "@react-router/serve": "^7.3.0",
+    "i18next": "^24.2.3",
     "isbot": "^5.1.17",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-i18next": "^15.4.1",
     "react-router": "^7.3.0"
   },
   "devDependencies": {