export const [i18nextMiddleware, getLocale, getInstance] =
  createI18nextMiddleware({
    detection: {
      supportedLanguages: ["es", "en"],
      fallbackLanguage: "en",
      cookie: localeCookie,
    },
    i18next: { resources },
    plugins: [initReactI18next],
  });

// app/locales/en/translation.ts
export default { title: "Example" };

// Large app: common + route namespaces
export default { common, home, notFound };

export const [i18nextMiddleware, getLocale] = createI18nextMiddleware({
  detection: { cookie: localeCookie, fallbackLanguage: "en" },
});

return data(
  { locale },
  { headers: { "Set-Cookie": await localeCookie.serialize(locale) } },
);

export async function loader({ context }: Route.LoaderArgs) {
  let locale = getLocale(context);
  return data(
    { locale },
    { headers: { "Set-Cookie": await localeCookie.serialize(locale) } },
  );
}

i18next.init({ detection: { order: ["htmlTag"], caches: [] } });

<I18nextProvider i18n={getInstance(routerContext)}>
  <ServerRouter context={entryContext} url={request.url} />
</I18nextProvider>

return data(namespaces[ns.data], { headers });

let t = getInstance(context).getFixedT(locale);