Back to home
@api18n/react

@api18n/react

Drop-in i18n for React + Next.js.

A runtime SDK that reads the JSON files the CLI just pulled. One init file, no Provider in your JSX, fully typed `t()`.

Install on npmnpm install @api18n/react
src/api18n.ts
// src/api18n.tsimport { createApi18n } from '@api18n/react';import en from './messages/en.json';export const api18n = createApi18n({  resources: { en },  defaultLocale: 'en',}); // anywhere in your appconst t = useTranslations();t('hello', { name: 'Eduardo' });

What it does

One init file

Call `createApi18n({ resources, defaultLocale })` once. `useTranslations()` works everywhere — no Provider boilerplate.

Type-safe keys

`t('hello', { name: 'Eduardo' })` is fully typed. Wrong keys, missing args, and wrong arg types all fail TypeScript.

ICU + rich tags

Plurals, dates, numbers, and `<link>chunks</link>` rendered with React components. All standard ICU MessageFormat.

Server Components

`getTranslations()` runs on the server. Translated strings ship as plain HTML — zero client JS per string.

Where it fits

The SDK consumes the JSON the CLI produces. They're designed to work together: typed keys, matching locale shape, and a single conventions doc.