Add i18next integration #242

Josip-Ledic · 2025-11-06T16:37:53Z

Summary

add core functionality based on the following syntax: t('someKey', "Default value in English co-located like this")
works with SSR setup
detects browser language automatically
sample translations in German
added documentation to README
cleaned up code

github-actions · 2025-11-06T16:38:25Z

All contributors have signed the DCO.
_{Posted by the DCO Assistant Lite bot.}

Josip-Ledic · 2025-11-06T16:42:08Z

I have read the DCO document and I hereby sign the DCO.

Josip-Ledic · 2025-11-07T08:41:26Z

src/entry-client.jsx

+import i18n from './i18n.client.js';
+
+// Hydrate i18n with server state to prevent flicker
+const { initialI18nStore, initialLanguage } =


Without this we get "Willkommen" -> "Welcome" -> "Willkommen" because server first gets the language from the headers, returns German, then the client side is initializing its json language file and because this is async it shows English for a split second and this causes flicker. Happy to do it in a more elegant way but this is what Bob suggested after a lot of back and forth 😄

Move this comment into a code comment please.

Josip-Ledic · 2025-11-07T08:46:47Z

src/i18n.client.js

+    supportedLngs: ['en', 'de'],
+
+    // Important for SSR
+    useSuspense: false,


ReactDOMServer does not yet support Suspense

Josip-Ledic · 2025-11-07T08:48:27Z

src/i18n.server.js

+    preload: ['en', 'de'], // Preload all languages on server
+
+    // Important for SSR
+    useSuspense: false,


ReactDOMServer does not yet support Suspense

Please add this in the comments. This needs to be an easy to find information for users.

Josip-Ledic · 2025-11-07T09:07:55Z

src/entry-server.jsx

+  };
+
+  const head = `<meta name="description" content="Server-side rendered page">
+<script>window.__INITIAL_I18N_STATE__ = ${JSON.stringify(initialState).replace(/</g, '\\u003c')}</script>`;


With this even the very first response from the server will contain the correct language that was sent in the request headers.

Move this into a code comment please.

Josip-Ledic · 2025-11-07T09:11:14Z

vite.config.js

 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [


This can also be loaded via native json file loaders but this one seemed reasonable to use https://www.npmjs.com/package/vite-plugin-i18next-loader

Move this into a code comment please.

- Install i18next and react-i18next with full SSR support - Configure client-side i18n with browser language detection - Configure server-side i18n with filesystem backend - Add improved German translations (idiomatic business German) - Integrate with Vite via i18next-loader plugin - Add i18next middleware to Express server - Update server-side entry to serialize translations for hydration - Update client-side entry to hydrate with server state - Translate all Welcome page content with defaultValue pattern - Document i18n usage and architecture in CLAUDE.md English text stays inline in components as defaultValue. Other languages defined in src/locales/*.json files. Browser automatically detects user's preferred language. No language flicker due to proper SSR hydration.

rodet

Overall I think this works great, good job @Josip-Ledic .

Two things to change before we release this:

Update the copyright years for each file here
Move a bunch of your PR explanation comments into the code so those don't get lost. They are valuable piece of information that should be in the code.

rodet · 2026-01-20T10:14:41Z

src/components/footer/Footer.jsx

-          <p>Footer</p>
-          <p>Copyright IBM 2025</p>
+          <p>{t('footer.title', 'Footer')}</p>
+          <p>{t('footer.copyright', 'Copyright IBM 2026')}</p>


It should be "Copyright IBM 2025, 2026" (original date, last edit date) instead

rodet · 2026-01-20T10:22:11Z

src/pages/dashboard/Dashboard.jsx

Copyright update needed 2025, 2026

rodet · 2026-01-20T10:22:24Z

src/components/commonHeader/CommonHeader.jsx

Copyright update needed 2025, 2026

rodet · 2026-01-20T10:25:43Z

src/i18n.server.js

+    preload: ['en', 'de'], // Preload all languages on server
+
+    // Important for SSR
+    useSuspense: false,


Please add this in the comments. This needs to be an easy to find information for users.

rodet · 2026-01-20T10:26:36Z

vite.config.js

 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [


Move this into a code comment please.

rodet · 2026-01-20T10:27:33Z

src/entry-server.jsx

+  };
+
+  const head = `<meta name="description" content="Server-side rendered page">
+<script>window.__INITIAL_I18N_STATE__ = ${JSON.stringify(initialState).replace(/</g, '\\u003c')}</script>`;


Move this into a code comment please.

rodet · 2026-01-20T10:27:48Z

src/entry-client.jsx

+import i18n from './i18n.client.js';
+
+// Hydrate i18n with server state to prevent flicker
+const { initialI18nStore, initialLanguage } =


Move this comment into a code comment please.

i18n is a significant feature that warrants this upgrade

…sion

Josip-Ledic requested a review from rodet as a code owner November 6, 2025 16:37

Josip-Ledic force-pushed the feature/47-i18next branch from ebabe0d to 8894c30 Compare November 6, 2025 16:39

Josip-Ledic commented Nov 7, 2025

View reviewed changes

Josip-Ledic marked this pull request as draft December 5, 2025 12:24

Josip-Ledic added 5 commits January 14, 2026 14:17

feat(i18n): add missing translations in german

87735a3

fix language detection

6d09295

docs(i18n): add initial, minimal description about i18n to readme

28ce0aa

update package lock

6d36394

Josip-Ledic force-pushed the feature/47-i18next branch from c5734a7 to 6d36394 Compare January 14, 2026 13:26

Josip-Ledic added 3 commits January 14, 2026 14:42

add missing German translations

7d79356

Merge remote-tracking branch 'origin/main' into feature/47-i18next

45ba557

fresh package lock without artifactory usage

66a7507

rodet requested changes Jan 20, 2026

View reviewed changes

rodet marked this pull request as ready for review January 20, 2026 10:34

rodet and others added 4 commits January 20, 2026 13:41

chore: upgrade the package version

3e7656a

i18n is a significant feature that warrants this upgrade

Merge remote-tracking branch 'origin/main' into feature/47-i18next

62f97f0

feat(i18n): address PR comments

82fadbe

feat(i18n): fix copyright headers, improve comments, bump package ver…

04d22fe

…sion

Josip-Ledic requested a review from rodet January 23, 2026 12:35

Add i18next integration #242

Are you sure you want to change the base?

Add i18next integration #242

Uh oh!

Conversation

Josip-Ledic commented Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

github-actions bot commented Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Josip-Ledic commented Nov 6, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rodet left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Josip-Ledic commented Nov 6, 2025 •

edited

Loading

github-actions bot commented Nov 6, 2025 •

edited

Loading