Merge pull request #2 from pulsate-dev/feat/1-i18n-setup

feat: setup i18n
pulsate-dev · Jul 17, 2024 · ac3d48b · ac3d48b
2 parents 7955c7d + 1b5c9d6
commit ac3d48b
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 25 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,29 +1,27 @@
-import {
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-} from "@remix-run/react";
-import '@radix-ui/themes/styles.css';
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";
+import "@radix-ui/themes/styles.css";
 import { Theme } from "@radix-ui/themes";
+import { I18nextProvider } from "react-i18next";
+import i18n from "../i18n/config";
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <Meta />
-        <Links />
-      </head>
-      <body>
-        <Theme>
-          {children}
-        </Theme>
-        <ScrollRestoration />
-        <Scripts />
-      </body>
+    <head>
+      <meta charSet="utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <Meta />
+      <Links />
+    </head>
+    <body>
+    <I18nextProvider i18n={i18n}>
+      <Theme>
+        {children}
+      </Theme>
+    </I18nextProvider>
+    <ScrollRestoration />
+    <Scripts />
+    </body>
     </html>
   );
 }

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -1,5 +1,7 @@
 import { Button, Flex, Text } from "@radix-ui/themes";
 import type { MetaFunction } from "@remix-run/node";
+import { useTranslation } from "react-i18next";
+import "../../i18n/config";
 
 export const meta: MetaFunction = () => {
   return [
@@ -9,11 +11,15 @@ export const meta: MetaFunction = () => {
 };
 
 export default function Index() {
+  const { t, i18n } = useTranslation();
+
   return (
     <Flex direction="column" gap="2">
-      <Text>Hello!</Text>
-      <Button>I am</Button>
-      <Button>Remix</Button>
+      <Text>
+        Hello! {t("welcome")} {t("appName")}
+      </Text>
+      <Button onClick={() => i18n.changeLanguage("en")}>Eng</Button>
+      <Button onClick={() => i18n.changeLanguage("ja_JP")}>Ja</Button>
     </Flex>
   );
 }
diff --git a/i18n/config.ts b/i18n/config.ts
@@ -0,0 +1,23 @@
+import i18n from "i18next";
+import {initReactI18next} from "react-i18next";
+import en from "./locales/en_US.json";
+import ja_JP from "./locales/ja_JP.json";
+
+i18n.use(initReactI18next).init({
+  resources: {
+    en: {
+      translation: en
+    },
+    ja_JP: {
+      translation: ja_JP
+    }
+  },
+  lng: "en",
+  fallbackLng: "en",
+  interpolation: {
+    escapeValue: false
+  }
+});
+
+
+export default i18n;
diff --git a/i18n/locales/en_US.json b/i18n/locales/en_US.json
@@ -0,0 +1,4 @@
+{
+  "appName": "Pulsate",
+  "welcome": "Welcome"
+}
diff --git a/i18n/locales/ja_JP.json b/i18n/locales/ja_JP.json
@@ -0,0 +1,4 @@
+{
+  "appName": "Pulsate",
+  "welcome": "ようこそ"
+}
diff --git a/package.json b/package.json
@@ -28,10 +28,13 @@
     "@typescript-eslint/eslint-plugin": "6.21.0",
     "@typescript-eslint/parser": "6.21.0",
     "eslint": "8.57.0",
+    "i18next": "^23.12.1",
+    "i18next-browser-languagedetector": "^8.0.0",
     "isbot": "^5.1.13",
     "lefthook": "^1.7.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.3"
   },
   "devDependencies": {
     "@remix-run/dev": "^2.10.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml