Accessibility, better DX, and performance get a lot of attention as it improves better UX significantly. Plus, it gives satisfaction to devs by seeing the significant improvements. But how about internationalization? A fun fact: Over 70% of the users in the world access non-English content. In this talk, I'll show you more surprising facts about internationalization and what are scalable approaches. You'll see examples with libraries for frameworks with a few different logic to implement different internationalization layouts.

1. i18n was the missing piece
ARISA FUKUZAKI
DevRel Engineer at Storyblok
Make your apps accessible to 70%+ of the users in the world

2. Arisa Fukuzaki
福﨑 有彩
Developer Relations Engineer
GirlCode Ambassador
GDE, Web Technologies
🥑
󰟲
@arisa_dev

3. 3 takeaways
from my talk
→
@arisa_dev
Impact of i18n
i18n fundamental logics
→
→ How Remix i18n works

4. Notes ⚠
→
@arisa_dev
There’re still discussions going
on about Remix & i18n features
There’s still some improvements
→
→ Join discussions #2877

5. Internationalization (i18n)
18 characters

6. “Do you like to implement i18n logic?”

8. Maybe, their i18n DX is not good? 🤔

10. Seems it’s not the best DX 👀

11. Based on the i18n DX, let’s talk about
numbers & facts 📊

12. 5.07 Billion

13. 5.07 bn. users in the world use the internet
Source: https://www.statista.com/statistics/262946/share-of-the-most-common-languages-on-the-internet/

14. 25.9%

15. English is used only 25.9% on the internet
Source: https://www.statista.com/statistics/262946/share-of-the-most-common-languages-on-the-internet/

16. 74.1%

17. 74.1% users access non-English content
Source: https://www.statista.com/statistics/262946/share-of-the-most-common-languages-on-the-internet/

18. China

19. China has the most internet users worldwide
Source: https://www.statista.com/statistics/262946/share-of-the-most-common-languages-on-the-internet/

20. Asia

21. Asia leads more than a half of global
internet users
Source: https://www.statista.com/statistics/262946/share-of-the-most-common-languages-on-the-internet/

22. Huge numbers to
ignore

23. Knowing different approaches with more
options will solve i18n DX🪄

24. Let’s talk about
fundamental logic

25. 3 ways to
Determine
languages &
regions
→
@arisa_dev
Location from IP address
Accept-Language
header/Navigator.languages
→
→ Identifier in URL

26. We use 2
ways - hybrid
→
@arisa_dev
Location from IP address
Accept-Language
header/Navigator.languages
→
→ Identifier in URL

27. 3 identifier URL
patterns

28. Differentiate by domains (Won’t
follow the same-origin policy󰢄)
→
@arisa_dev
hello.com
hello.es
Pattern 1

29. URL parameters (NOT user
friendly🙅)
→
@arisa_dev
hello.com?loc=de
hello.com?loc=nl-NL
Pattern 2

30. Localized sub-directories 👍
→
@arisa_dev
hello.com/ja
hello.com/nl-NL
Pattern 3

31. Let’s talk about
Frameworks & libs

32. @arisa_dev
Some frameworks & libs use i18n
frameworks.

33. Let’s see how it works
in Remix

34. 2 approaches
to choose
→
@arisa_dev
remix-i18next
→ CMS

35. remix-i18next is a npm package for Remix
to use i18next.

36. remix-i18next example

37. Default and a preferred
language.
→
@arisa_dev
{
“greeting”: “Hello”
}
Create translation
files
public/locales/en/common.json
{
“greeting”: “こんにちは”
}
public/locales/ja/common.json

38. i18next config file.
→
@arisa_dev
export default {
supportedLngs: ['en', 'ja'],
fallbackLng: 'en',
// customize namespace here
defaultNS: 'common',
react: {useSuspense: false},
};
Create
app/i18n.js
app/i18n.js

39. @arisa_dev
@storyblok
i18next.server.js
import Backend from "i18next-fs-backend";
import { resolve } from "node:path";
import { RemixI18Next } from "remix-i18next";
import i18n from "~/i18n"; // i18next config file
import languageCookie from "~/cookie";
let i18next = new RemixI18Next({
detection: {
supportedLanguages: i18n.supportedLngs,
fallbackLanguage: i18n.fallbackLng,
cookie: languageCookie,
},
// This is the config for i18next & when translating messages server-side only
i18next: {
...i18n, // Iterate arr/strings from i18next config
backend: {
loadPath: resolve("./public/locales/{{lng}}/{{ns}}.json"), // Translation file paths
},
},
// Backend to load the translation
backend: Backend,
});
export default i18next;

40. Create
Client-side &
Server-side
config files
→
@arisa_dev
entry.client.jsx
→ entry.server.jsx

41. @arisa_dev
@storyblok
entry.client.jsx
import { RemixBrowser } from "@remix-run/react";
import { hydrateRoot } from "react-dom/client";
import i18next from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import Backend from "i18next-http-backend";
import { I18nextProvider, initReactI18next } from "react-i18next";
import { getInitialNamespaces } from "remix-i18next";
import i18n from "./i18n";
i18next
// … i18next init, client-side lang detector, backend & namespace configs, etc
.then(() => {
// After i18next init, hydrate the app
// Wait to ensure translations are loaded before the hydration → WHY? Next slide.
// Wrap RemixBrowser in I18nextProvider → WHY? Next slide.
hydrateRoot(
document,
<I18nextProvider i18n={i18next}>
<RemixBrowser /> // It’s used by React to hydrate html ← received from server
</I18nextProvider>
);
});

42. Why translation should be loaded before
hydration?

43. The app is not yet interactive
→
@arisa_dev
If translation is
NOT loaded before
hydration English 日本語 “Hello”
?

44. @arisa_dev
English 日本語 “こんにちは”
The app is interactive
→
If translation is
loaded before
hydration

45. Why wrapping RemixBrowser with
I18nextProvider?

46. @arisa_dev
@storyblok
i18nextProvider from react-i18next
import { createElement, useMemo } from 'react';
import { I18nContext } from './context';
export function I18nextProvider({ i18n, defaultNS, children }) {
const value = useMemo(
() => ({
i18n, // i18n config
defaultNS, // default namespace
}),
[i18n, defaultNS], // i18n & defaultNS are the same ? cache calc : re-render
);
return createElement(
// …
}

47. Identifying user’s preferred language &
redirecting them can be done on the
server.

48. That’s what server-side config file does.
→ remix-i18next

49. Let’s use configs in
action

50. @arisa_dev
@storyblok
app/root.jsx
// …
import { useChangeLanguage } from "remix-i18next";
import { useTranslation } from "react-i18next";
import i18next from "~/i18next.server";
export let loader = async ({ request }) => { // loader is Backend API
let locale = await i18next.getLocale(request);
return json({ locale });
};
export let handle = {
i18n: "common",
};
export default function App() {
let { locale } = useLoaderData(); // Get the locale from the loader func
let { i18n } = useTranslation();
// useChangeLanguage updates the i18n instance lang to the current locale from loader
// Locale will be updated & i18next loads the correct translation files
useChangeLanguage(locale);
return (
<html lang={locale} dir={i18n.dir()}>
// <head /><body /> etc…
</html>
);
}

51. @arisa_dev
@storyblok
any route
import { useTranslation } from
'react-i18next';
export default function Component() {
let { t } = useTranslation();
return <h1>{t("greeting")}</h1>;
}

52. I have 3 confessions.

53. 1. I used URL param

54. 2. Do we (devs) need to maintain
translation files…?

55. 3. Did we translate slugs…?

56. We want to
achieve…
→
@arisa_dev
Localized URL (sub-directory)
→ No translation files in code

57. (Headless) CMS
example

58. Connect your
Remix app
with CMS
@arisa_dev
i.e. Remix & Storyblok 5 min tutorial:
https://www.storyblok.com/tp/headless-cms-remix

59. Choose
between 4
approaches →
@arisa_dev
Mix above
→ Space (project)-level translation
→ Field-level translation
→ Folder-level translation

62. Splats
@arisa_dev

63. @arisa_dev
@storyblok
app/routes/$.tsx
export default function Page() {
// useLoaderData returns JSON parsed data from loader func
let story = useLoaderData();
story = useStoryblokState(story, {
resolveRelations: ["featured-posts.posts", "selected-posts.posts"]
});
return <StoryblokComponent blok={story.content} />
};
// loader is Backend API & Wired up through useLoaderData
export const loader = async ({ params, preview = false }) => {
let slug = params["*"] ?? "home";
slug = slug.endsWith("/") ? slug.slice(0, -1) : slug;
let sbParams = {
version: "draft",
resolve_relations: ["featured-posts.posts", "selected-posts.posts"],
};
// …
let { data } = await getStoryblokApi().get(`cdn/stories/${slug}`,
sbParams);
return json(data?.story, preview);
};

64. Summary
● More than a half of the users in the
world access localized content
● Know more approaches to find
better DX for your case
● i18n is related to performance, UI
&UX
@arisa_dev

65. Thank you - ありがとう
@arisa_dev