Simple, pragmatic and performant i18n solution for JavaScript applications

There're great libraries for i18n that support absolutely everything like interpolation with React components, server-side rendering, and code splitting (or maybe I should call it - JSON splitting). This is one example of such library - react-i18next.

The biggest drawback and issue, something that keeps me from using it is its bundle size. Assuming you're using gzip for compression like everyone else, it will take 20kB+ from your bundle. For some people/teams it's an acceptable amount, but for me, I don't believe it to be a good trade-off.

And that's why I decided to write my implementation that has great DX (supports dotted paths with autocompletion) and is easy to scale/maintain. I used the js-cookie library to get and parse the cookie with legible & declarative API.

The example is done specifically for Next.js, but you can seamlessly port it to any other library/framework.

// i18n.ts
 
import Cookies from "js-cookie";
import get from "lodash/get";
import { en } from "./en";
 
type Locales = "en";
 
const defaultTranslations: Record<Locales, Partial<typeof en>> = {
  en,
};
 
export const t = (key: Join<PathsToStringProps<typeof en>, ".">, translations = defaultTranslations) => {
  const locale = Cookies.get("NEXT_LOCALE") as Locales;
  return get(translations[locale] || translations["en"], key);
};
 
type PathsToStringProps<T> = T extends string
  ? []
  : {
      [K in Extract<keyof T, string>]: [K, ...PathsToStringProps<T[K]>];
    }[Extract<keyof T, string>];
 
type Join<T extends string[], D extends string> = T extends []
  ? never
  : T extends [infer F]
  ? F
  : T extends [infer F, ...infer R]
  ? F extends string
    ? \`\${F}\${D}\${Join<Extract<R, string[]>, D>}\`
    : never
  : string;

This is how the translations file looks like

// en.ts
 
export const en = {
  ctaSection: {
    title: 'Some value for demo purposes',
    // ...The rest of the items, removed for brevity
  },
};

And this is how you use it:

You don't have to worry about the performance unless the file exceeds a few hundred lines. After that, you can use dynamic imports and split the translations file into smaller chunks.