i18next + react-i18next: plurals, interpolation and SSR rendering: working versions (tested 2026-10-15)

{
  "name": "i18next-react-ssr",
  "private": true,
  "type": "module",
  "scripts": {
    "test": "node --import tsx --test test/*.test.ts"
  },
  "dependencies": {
    "i18next": "26.4.5",
    "react-i18next": "17.0.16",
    "react": "19.3.1",
    "react-dom": "19.3.1"
  },
  "devDependencies": {
    "tsx": "4.23.15",
    "@types/node": "24.19.2"
  }
}

import i18next from "i18next";

export const resources = {
  en: { translation: {
    greeting: "Hello, {{name}}!",
    inbox_one: "You have {{count}} message",
    inbox_other: "You have {{count}} messages",
    friend_male: "He is your friend",
    friend_female: "She is your friend",
    friend: "They are your friend",
  } },
  fr: { translation: {
    greeting: "Bonjour, {{name}} !",
    inbox_one: "Vous avez {{count}} message",
    inbox_other: "Vous avez {{count}} messages",
  } },
};

// One instance per request on the server so languages never leak between users.
export async function createI18n(lng: string) {
  const i = i18next.createInstance();
  await i.init({ lng, fallbackLng: "en", resources, interpolation: { escapeValue: true } });
  return i;
}

import { createElement as h } from "react";
import { useTranslation } from "react-i18next";

export function Inbox({ name, count }: { name: string; count: number }) {
  const { t } = useTranslation();
  return h("div", null, h("h1", null, t("greeting", { name })), h("p", null, t("inbox", { count })));
}

import { test } from "node:test";
import assert from "node:assert/strict";
import { createElement as h } from "react";
import { renderToString } from "react-dom/server";
import { I18nextProvider } from "react-i18next";
import { createI18n } from "../src/i18n.ts";
import { Inbox } from "../src/Inbox.ts";

test("plurals, context and fallback", async () => {
  const i = await createI18n("en");
  assert.equal(i.t("inbox", { count: 1 }), "You have 1 message");
  assert.equal(i.t("inbox", { count: 5 }), "You have 5 messages");
  assert.equal(i.t("friend", { context: "female" }), "She is your friend");
  assert.equal(i.t("friend", { context: "other" }), "They are your friend");
  const fr = await createI18n("fr");
  assert.equal(fr.t("friend", { context: "male" }), "He is your friend"); // falls back to en
});

test("interpolation escapes HTML", async () => {
  const i = await createI18n("en");
  assert.equal(i.t("greeting", { name: "<b>x</b>" }), "Hello, &lt;b&gt;x&lt;&#x2F;b&gt;!");
});

test("SSR render with per-request instances", async () => {
  const [en, fr] = await Promise.all([createI18n("en"), createI18n("fr")]);
  const render = (i: any) => renderToString(h(I18nextProvider, { i18n: i }, h(Inbox, { name: "Ada", count: 2 })));
  assert.match(render(fr), /Bonjour, Ada !.*Vous avez 2 messages/);
  assert.match(render(en), /Hello, Ada!.*You have 2 messages/);
});