fix: i18n

.github/workflows/test.yml

@@ -6,7 +6,7 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  bench:
+  test:
     runs-on: ubuntu-latest
     steps:
       - name: ⬇️ Checkout repo

app/entry.client.tsx

@@ -3,7 +3,6 @@ import { CacheProvider } from "@emotion/react";
 import { RemixBrowser } from "@remix-run/react";
 import i18next from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
-import Backend from "i18next-http-backend";
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 import { I18nextProvider, initReactI18next } from "react-i18next";
@@ -17,12 +16,8 @@ const cache = createCache({ key: "-", stylisPlugins: [] });
 i18next
   .use(initReactI18next)
   .use(LanguageDetector)
-  .use(Backend)
   .init({
     ...i18n,
-    backend: {
-      loadPath: "/locales/{{lng}}/{{ns}}.json"
-    },
     detection: {
       order: ["cookie", "htmlTag"],
       caches: ["cookie"],

app/entry.server.tsx

@@ -1,4 +1,3 @@
-import { resolve } from "node:path";
 import { PassThrough } from "node:stream";
 
 import createCache from "@emotion/cache";
@@ -11,7 +10,6 @@ import type {
 import { createReadableStreamFromReadable } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
 import i18next from "i18next";
-import Backend from "i18next-fs-backend";
 import { isbot } from "isbot";
 import { renderToPipeableStream } from "react-dom/server";
 import { I18nextProvider, initReactI18next } from "react-i18next";
@@ -28,13 +26,7 @@ import { getLocale } from "./i18n/i18next.server";
 const ABORT_DELAY = 6590;
 
 // Set up i18next server backend.
-await i18next
-  .use(initReactI18next)
-  .use(Backend)
-  .init({
-    ...i18n,
-    backend: { loadPath: resolve("./public/locales/{{lng}}/{{ns}}.json") }
-  });
+await i18next.use(initReactI18next).init(i18n);
 
 /**
  * Handles incoming requests.

app/i18n/i18n.ts

@@ -1,10 +1,25 @@
 import type { ServerRuntimeMetaArgs } from "@remix-run/server-runtime";
+import type { InitOptions } from "i18next";
 import { getFixedT } from "i18next";
 
+import en from "@/static/locales/en.json";
+import zh from "@/static/locales/zh.json";
+
+const ns = "translations";
+
 export default {
   supportedLngs: ["zh", "en"],
-  fallbackLng: "en"
-};
+  fallbackLng: "en",
+  ns,
+  resources: {
+    en: {
+      [ns]: en
+    },
+    zh: {
+      [ns]: zh
+    }
+  }
+} satisfies InitOptions;
 
 export function getT<MatchLoaders>(
   matches: ServerRuntimeMetaArgs<MatchLoaders>["matches"]

app/i18n/i18next.d.ts

@@ -1,14 +1,16 @@
 import type { ParseKeys } from "i18next";
 
-import type translation from "@/public/locales/en/translation.json";
+import type translation from "@/static/locales/en.json";
+
+import type i18n from "./i18n";
 
 declare module "i18next" {
   interface CustomTypeOptions {
-    defaultNS: "translation";
+    defaultNS: i18n.ns;
     resources: {
       translation: typeof translation;
     };
   }
 }
 
-type TFunctionArg = ParseKeys<"translation">;
+type TFunctionArg = ParseKeys<i18n.ns>;

app/i18n/i18next.server.ts

@@ -1,6 +1,3 @@
-import { resolve } from "node:path";
-
-import Backend from "i18next-fs-backend";
 import { RemixI18Next } from "remix-i18next/server";
 
 import { getCookieValue } from "~/hooks/cookie";
@@ -13,13 +10,7 @@ export const i18next = new RemixI18Next({
     fallbackLanguage: i18n.fallbackLng,
     order: ["cookie", "header"]
   },
-  i18next: {
-    ...i18n,
-    backend: {
-      loadPath: resolve("./public/locales/{{lng}}/{{ns}}.json")
-    }
-  },
-  plugins: [Backend]
+  i18next: i18n
 });
 
 const I18NEXT_KEY = "i18next";

app/theme/global.less

@@ -1,6 +1,4 @@
 p {
-  margin-top: 1rem;
-
   &:first-child {
     margin-top: 0;
   }