(JS Poland ver.) 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. Dzien dobry👋

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

3. Arisa Fukuzaki
福﨑 有彩
Senior DevRel Engineer
GirlCode Ambassador
GDE, Web Technologies
🥑
👩💻
@arisa_dev

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

5. Talk slides
@arisa_dev
🌴 linktr.ee/arisa_dev

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

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

8. Internationalization (i18n)
18 characters

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

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

13. Seems it’s not the best DX 👀

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

15. 5.07 Billion

16. 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/

17. 25.9%

18. 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/

19. 74.1%

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

21. China

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

23. Asia

24. 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/

25. Huge numbers to ignore

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

27. Let’s talk about fundamental
logic

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

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

30. 3 identifier URL patterns

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

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

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

34. Let’s talk about Frameworks
& libs

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

36. Let’s see how it works in
Remix

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

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

39. remix-i18next example

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

41. 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

42. 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

43. 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

44. 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

45. @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: {
// Translation file paths
loadPath: resolve(“./public/locales/{{lng}}/{{ns}}.json"),
},
},
// Backend to load the translation
backend: Backend,
});
export default i18next;

46. @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: {
// Translation file paths
loadPath: resolve(“./public/locales/{{lng}}/{{ns}}.json"),
},
},
// Backend to load the translation
backend: Backend,
});
export default i18next;

47. @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: {
// Translation file paths
loadPath: resolve(“./public/locales/{{lng}}/{{ns}}.json"),
},
},
// Backend to load the translation
backend: Backend,
});
export default i18next;

48. @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: {
// Translation file paths
loadPath: resolve(“./public/locales/{{lng}}/{{ns}}.json"),
},
},
// Backend to load the translation
backend: Backend,
});
export default i18next;

49. @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: {
// Translation file paths
loadPath: resolve(“./public/locales/{{lng}}/{{ns}}.json"),
},
},
// Backend to load the translation
backend: Backend,
});
export default i18next;

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

51. @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>
);
});

52. @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>
);
});

53. @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>
);
});

54. Why translation should be loaded
before hydration?

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

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

57. Why wrapping RemixBrowser with
I18nextProvider?

58. @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(
// …
}

59. @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(
// …
}

60. @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(
// …
}

61. Let’s use configs in action

62. @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>
);
}

63. @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>
);
}

64. @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>
);
}

65. @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>
);
}

66. @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>
);
}

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

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

69. I have 3 confessions.

70. 1.I used URL param

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

72. 3. Did we translate slugs…?

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

74. (Headless) CMS example

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

76. Choose
between 4
approaches →
@arisa_dev
Mix above
→ Space-level translation
→ Field-level translation
→ Folder-level translation

77. Choose
between 4
approaches →
@arisa_dev
Mix above
→ Space-level translation
→ Field-level translation
→ Folder-level translation

80. Splats
@arisa_dev

81. @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);
};

82. @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);
};

83. @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);
};

84. Example repo
@arisa_dev
i.e. Remix & Storyblok i18n repo:
https://github.com/schabibi1/remix-i18n-talk

85. 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

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