Implement Shopify Hydrogen Remix i18n Translations

1{
2  "welcome": "hello world"
3}
Copy

1// i18next.server.ts
2
3import { RemixI18Next } from "remix-i18next/server";
4import i18n from "~/lib/i18n"; // your i18n configuration file
5import enCommon from "public/locales/en.json"
6import zhCommon from "public/locales/zh.json"
7
8let i18next = new RemixI18Next({
9  detection: {
10    supportedLanguages: i18n.supportedLngs,
11    fallbackLanguage: i18n.fallbackLng,
12  },
13  // This is the configuration for i18next used
14  // when translating messages server-side only
15  i18next: {
16    ...i18n,
17    resources: {
18        "en": enCommon,
19        "zh": zhCommon,
20    }
21  },
22  // The i18next plugins you want RemixI18next to use for `i18n.getFixedT` inside loaders and actions.
23  // E.g. The Backend plugin for loading translations from the file system
24  // Tip: You could pass `resources` to the `i18next` configuration and avoid a backend here
25  plugins: [],
26});
27
28export default i18next;
Copy

1// entry.server.tsx
2import {I18nextProvider, initReactI18next} from 'react-i18next';
3import type {EntryContext, AppLoadContext} from '@shopify/remix-oxygen';
4
5import enCommon from 'public/locales/en.json'; 
6
7
8export default async function handleRequest(
9  request: Request,
10  responseStatusCode: number,
11  responseHeaders: Headers,
12  remixContext: EntryContext,
13  context: AppLoadContext,
14) {
15
16  // the default logic already existing
17
18  // logic to add i18next
19  
20  let instance = createInstance();
21  let lng = localeFromUrl; // lang extracted from helper function
22  let ns = i18next.getRouteNamespaces(remixContext);
23
24  await instance
25    .use(initReactI18next) // Tell our instance to use react-i18next
26
27    .init({
28      // This is the list of languages your application supports
29      supportedLngs: ["en", "zh"],
30      // This is the language you want to use in case
31      // if the user language is not in the supportedLngs
32      fallbackLng: "en",
33      // The default namespace of i18next is "translation", but you can customize it here
34      defaultNS: "common",
35      lng, // The locale we detected above
36      ns, // The namespaces the routes about to render wants to use
37      resources: {
38        en: {common: enCommon},
39        //zh: {common: zhCommon}, // add other languages as needed
40      },
41    });
42
43    // .. other logic
44    // wrap NonceProvider with I18NextProvider
45    const body = await renderToReadableStream(
46        <I18nextProvider i18n={instance}>
47          <NonceProvider>
48            <RemixServer context={remixContext} url={request.url} />
49          </NonceProvider>
50        </I18nextProvider>,
51        {
52          nonce,
53          signal: request.signal,
54          onError(error) {
55            // eslint-disable-next-line no-console
56            console.error(error);
57            responseStatusCode = 500;
58          },
59        },
60      );
61}
Copy

1// entry.client.tsx
2
3import {RemixBrowser} from '@remix-run/react';
4import {startTransition, StrictMode} from 'react';
5import {hydrateRoot} from 'react-dom/client';
6import i18next from 'i18next';
7import {I18nextProvider, initReactI18next} from 'react-i18next';
8import {getInitialNamespaces} from 'remix-i18next/client';
9import enCommon from 'public/locales/en.json';
10import zhCommon from 'public/locales/zh.json';
11
12if (!window.location.origin.includes('webcache.googleusercontent.com')) {
13  i18next
14    .use(initReactI18next) // Tell i18next to use the react-i18next plugin
15    .init({
16      supportedLngs: ["en", "zh"],
17      // This is the language you want to use in case
18      // if the user language is not in the supportedLngs
19      fallbackLng: "en",
20      // The default namespace of i18next is "translation", but you can customize it here
21      defaultNS: "common",
22      // This function detects the namespaces your routes rendered while SSR use
23      ns: getInitialNamespaces(),
24      // backend: {loadPath: '../locales/{{lng}}/{{ns}}.json'},
25
26      resources: {
27        en: {common: enCommon},
28        zh: {common: zhCommon},
29      },
30      detection: {
31        // Here only enable htmlTag detection, we'll detect the language only
32        // server-side with remix-i18next, by using the `` attribute
33        // we can communicate to the client the language detected server-side
34        order: ['htmlTag'],
35        // Because we only use htmlTag, there's no reason to cache the language
36        // on the browser, so we disable it
37        caches: [],
38      },
39    })
40    .then(() => {
41      startTransition(() => {
42        hydrateRoot(
43          document,
44          <I18nextProvider i18n={i18next}>
45            <StrictMode>
46              <RemixBrowser />
47            </StrictMode>
48          </I18nextProvider>,
49        );
50      });
51    });
52}
53
Copy

1import {useTranslation} from 'react-i18next';
2
3const Index = () => {
4  const {t} = useTranslation();
5
6  return (
7    <div>
8      <h1>{t('welcome')}</h1>
9    </div>
10  )
11
12}
13
14export default Index;
Copy

1export function shouldRevalidate({
2  currentParams,
3  nextParams,
4  defaultShouldRevalidate,
5}) {
6  const currentId = currentParams.slug.split("--")[1];
7  const nextId = nextParams.slug.split("--")[1];
8  if (currentId === nextId) {
9    return false;
10  }
11
12  return defaultShouldRevalidate;
13}
Copy