feat: setup i18next

src/i18next.d.ts

@@ -0,0 +1,9 @@
+import "i18next";
+
+import type { resources } from "../public/locales/en.d.ts";
+
+declare module "i18next" {
+  interface CustomTypeOptions {
+    resources: { translation: typeof resources };
+  }
+}

src/i18next.ts

@@ -0,0 +1,27 @@
+import i18next from "i18next";
+import Backend, { type HttpBackendOptions } from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+
+declare const __LANGS__: string[];
+declare const __LOCALES_PATH__: string;
+declare const __DEFAULT_LANG__: string;
+
+export const languages = __LANGS__.map((key) => ({
+  key,
+  label: key.toUpperCase(),
+}));
+
+i18next
+  .use(Backend)
+  .use(initReactI18next)
+  .init<HttpBackendOptions>({
+    backend: {
+      loadPath: `/${__LOCALES_PATH__}/{{lng}}.json`,
+    },
+    fallbackLng: __DEFAULT_LANG__,
+    supportedLngs: __LANGS__,
+    debug: import.meta.env.DEV,
+    interpolation: {
+      escapeValue: false,
+    },
+  });

src/main.tsx

@@ -1,10 +1,11 @@
 import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 import "./index.css";
 import { routeTree } from "./routeTree.gen";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import "./i18next";
 
 const router = createRouter({ routeTree });
 

src/routes/__root.tsx

@@ -17,6 +17,12 @@ export const Route = createRootRoute({
       <hr />
       <Outlet />
       <TanStackDevtools
+        config={{
+          defaultOpen: false,
+          panelLocation: "bottom",
+          theme: "dark",
+          position: "middle-left",
+        }}
         plugins={[
           {
             name: "TanStack Query",

src/routes/index.tsx

@@ -1,10 +1,25 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import { useEffect, useState } from "react";
+import { languages } from "../i18next";
 
 export const Route = createFileRoute("/")({
   component: () => {
+    const { t, i18n } = useTranslation();
+
+    const [langIdx, setLangIdx] = useState(0);
+    useEffect(() => {
+      i18n.changeLanguage(languages[langIdx].key);
+    }, [langIdx, i18n]);
+
     return (
       <div className="p-2">
-        <h3>Welcome Home!</h3>
+        <h3>
+          {t("hello")}
+          <button onClick={() => setLangIdx((langIdx + 1) % languages.length)}>
+            {i18n.language}
+          </button>
+        </h3>
       </div>
     );
   },

src/vite-env.d.ts

@@ -0,0 +1,11 @@
+interface ViteTypeOptions {
+  strictImportMetaEnv: unknown;
+}
+
+interface ImportMetaEnv {
+  MODE: "development" | "production" | "staging";
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}