i18nによる日本語、英語の多言語対応

.cursorrules

@@ -0,0 +1 @@
+すべて日本語で出力してください

user/.storybook/i18n.ts

@@ -0,0 +1,40 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import nextI18NextConfig from '../next-i18next.config.js';
+import commonEn from '../public/locales/en/common.json';
+import commonJa from '../public/locales/ja/common.json';
+
+const resources = {
+  ja: {
+    common: commonJa,
+  },
+  en: {
+    common: commonEn,
+  },
+} as const;
+
+const { defaultLocale, locales } = nextI18NextConfig.i18n;
+
+export const initStorybookI18n = () => {
+  if (!i18n.isInitialized) {
+    i18n.use(initReactI18next).init({
+      resources,
+      lng: defaultLocale,
+      fallbackLng: defaultLocale,
+      supportedLngs: locales,
+      ns: ['common'],
+      defaultNS: 'common',
+      interpolation: {
+        escapeValue: false,
+      },
+      react: {
+        useSuspense: false,
+      },
+      initImmediate: false,
+    });
+  }
+
+  return i18n;
+};
+
+export default initStorybookI18n();

user/.storybook/preview.tsx

@@ -1,27 +1,32 @@
 // .storybook/preview.tsx
+import React from 'react';
 import type { Preview } from '@storybook/react';
 import { themes } from '@storybook/theming';
 import { SessionProvider } from 'next-auth/react';
+import { I18nextProvider } from 'react-i18next';
 import { ToastContainer } from 'react-toastify';
+import i18n from './i18n';
 
 const preview: Preview = {
   decorators: [
     (Story) => (
-      <SessionProvider session={null}>
-        <Story />
-        <ToastContainer
-          position="bottom-center"
-          autoClose={5000}
-          hideProgressBar={false}
-          newestOnTop={false}
-          closeOnClick
-          rtl={false}
-          pauseOnFocusLoss
-          draggable
-          pauseOnHover
-          theme="light"
-        />
-      </SessionProvider>
+      <I18nextProvider i18n={i18n}>
+        <SessionProvider session={null}>
+          <Story />
+          <ToastContainer
+            position="bottom-center"
+            autoClose={5000}
+            hideProgressBar={false}
+            newestOnTop={false}
+            closeOnClick
+            rtl={false}
+            pauseOnFocusLoss
+            draggable
+            pauseOnHover
+            theme="light"
+          />
+        </SessionProvider>
+      </I18nextProvider>
     ),
   ],
   tags: ['autodocs'],

user/next-i18next.config.js

@@ -0,0 +1,11 @@
+const path = require('path');
+
+/** @type {import('next-i18next').UserConfig} */
+module.exports = {
+  i18n: {
+    defaultLocale: 'ja',
+    locales: ['ja', 'en'],
+  },
+  localePath: path.resolve('./public/locales'),
+  reloadOnPrerender: process.env.NODE_ENV === 'development',
+};

user/next.config.ts

@@ -2,6 +2,9 @@
 import type { NextConfig } from 'next';
 import type { RuleSetRule } from 'webpack';
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { i18n } = require('./next-i18next.config');
+
 const apiConfig: {
   [key: string]: {
     SSR_API_URL: string;
@@ -34,6 +37,7 @@ const nextConfig: NextConfig = {
     SSR_API_URL,
     NEXT_PUBLIC_API_URL,
   },
+  i18n,
   experimental: {
     turbo: {
       rules: {

user/package.json

@@ -28,12 +28,15 @@
     "embla-carousel": "^8.6.0",
     "embla-carousel-react": "^8.5.2",
     "framer-motion": "^12.4.2",
+    "i18next": "^25.7.3",
     "next": "15.0.3",
     "next-auth": "^4.24.11",
+    "next-i18next": "^15.4.3",
     "process": "^0.11.10",
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106",
     "react-hook-form": "^7.54.2",
+    "react-i18next": "^16.5.0",
     "react-icons": "^5.4.0",
     "react-textfitfix": "^1.1.0",
     "react-toastify": "^11.0.5",
@@ -58,6 +61,7 @@
     "@storybook/react": "^8.5.0",
     "@storybook/test": "^8.5.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@types/i18next": "^13.0.0",
     "@types/node": "^20.17.24",
     "@types/react": "^18",
     "@types/react-dom": "^18",