i18n with Redwood · cho.sh

i18n with Redwood

Warning

This post is more than a year old. Information may be outdated.

This is an opinionated guide of implementing Internationalization with Redwood.js

Initial Setup

`i18n.js`

Extract the allowed list for i18n.

Backlinks2

230615 IDOL Stack

Comments0

No comments yet. Be the first to share your thoughts.

Comments

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";

import en from "./locales/en.json";
import fr from "./locales/fr.json";
import ko from "./locales/ko.json";

const languages = {
  en: {
    translation: en,
  },
  fr: {
    translation: fr,
  },
  ko: {
    translation: ko,
  },
};

i18n
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    interpolation: { escapeValue: false }, // React already does escaping
    fallbackLng: "en",
    resources: languages,
  });

export const allowedLanguagesList = Object.keys(languages); // 🤟 Here!

export default i18n;

tsx

import { useEffect } from "react";

import { useTranslation } from "react-i18next";

import { Redirect, routes } from "@redwoodjs/router";
import { MetaTags } from "@redwoodjs/web";

import ArticlesCell from "src/components/ArticlesCell";
import { allowedLanguagesList } from "src/i18n";

const HomePage = ({ lang }) => {
  const { i18n } = useTranslation();
  useEffect(() => {
    i18n.changeLanguage(lang);
  }, [lang, i18n]);

  // 1. website.com/en/about is allowed

  // 2. !lang -> The `lang` property is missing.
  // i.e., website.com/about

  // 3. !allowedLanguagesList.includes(lang) -> the `lang` property is not in our defined list.
  // i.e., website.com/zz/about
  if (!lang || !allowedLanguagesList.includes(lang)) {
    if (allowedLanguagesList.includes(navigator.language)) {
      // 💬 Try to use the navigator.language
      return <Redirect to={routes.home({ lang: navigator.language })} />;
    } else {
      // 🇺🇸 English as the default fallback
      return <Redirect to={routes.home({ lang: "en" })} />;
    }
  }

  return (
    <>
      <MetaTags title="Home" description="Home page" />
      <ArticlesCell />
    </>
  );
};

export default HomePage;

i18n with Redwood

Initial Setup

`i18n.js`

Routing and Navigating

Headers

Sitemap.xml

Consideration

Reference