Loading...
Loading...
Guide for adding Multi-language support to Shopify Apps using i18next. Covers setup, localization files, and Admin context.
npx skill4agent add toilahuongg/shopify-agents-kit shopify-app-i18ni18nextreact-i18nextremix-i18nextnpm install i18next react-i18next remix-i18next i18next-fs-backend i18next-http-backendapp/i18n.server.tsimport { RemixI18Next } from "remix-i18next/server";
import { createInstance } from "i18next";
import i18n from "~/i18n"; // client config
import { resolve } from "node:path";
export const i18nServer = new RemixI18Next({
detection: {
supportedLanguages: i18n.supportedLngs,
fallbackLanguage: i18n.fallbackLng,
},
// This is the configuration for i18next
i18next: {
...i18n,
backend: {
loadPath: resolve("./public/locales/{{lng}}/{{ns}}.json"),
},
},
});app/root.tsxexport async function loader({ request }: LoaderFunctionArgs) {
const locale = await i18nServer.getLocale(request);
return json({ locale });
}
export const handle = {
// In the handle export, we can add a reference to a translation namespace
// This will load the translations for this namespace for this route
i18n: "common",
};
export default function App() {
const { locale } = useLoaderData<typeof loader>();
useChangeLanguage(locale); // Syncs remix locale with i18next
return (
<html lang={locale} dir={i18n.dir(locale)}>
{/* ... */}
</html>
);
}public/localespublic/
locales/
en/
common.json
fr/
common.json
vi/
common.jsoncommon.json{
"welcome": "Welcome to my app",
"dashboard": {
"title": "Dashboard",
"stats": "Statistics"
}
}import { useTranslation } from "react-i18next";
export function DashboardHeader() {
const { t } = useTranslation("common");
return (
<Page title={t("dashboard.title")}>
<p>{t("welcome")}</p>
</Page>
);
}?locale=fr-FRShop.billingAddress.countryremix-i18nextlocalesextensions/my-ext/locales/en.default.jsonextensions/checkout-ui/locales/en.json