Quick Start

Installation

Install with your favorite package manager:

npm install intl-t

Setup

Translations

Set up your translation files. Create a directory for your translations, e.g., i18n/messages/, and add your translation files in JSON format.

i18n/messages/en.json

{
  "homepage": {
    "welcome": "Welcome, {user}!",
  },
}

Configuration

Create a translation instance and configure it with your translation files.

i18n/translation.ts

import en from "./messages/en.json";
import es from "./messages/es.json";

import { Translation } from "intl-t";

export const t = new Translation({ locales: { en, es } });

i18n/translation.ts

import en from "./messages/en.json";
import es from "./messages/es.json";

import { createTranslation } from "intl-t";

export const t = createTranslation({ locales: { en, es } });

Integration

Depending on your framework, you may need to integrate the translation instance into your application.

i18n/translation.tsx

import { Translation } from "intl-t/react";

export const { Translation, useTranslation } = new Translation(/* ... */);

App.tsx

import { Translation } from "./i18n/translation";

export default function App() {
  return (
    <Translation>
      <Content />
    </Translation>
  );
}

i18n/translation.tsx

import { Translation } from "intl-t/next";

export const { Translation, useTranslation } = new Translation({/* ... */});

i18n/navigation.ts

import { createNavigation } from "intl-t/navigation";
import { allowedLocales } from "./locales";

export const { middleware, generateStaticParams, Link, redirect, useRouter } = createNavigation({ allowedLocales: ["en", "es"] as const });

app/layout.tsx

import { setRequestLocale } from "intl-t/next";
import { Translation } from "@/i18n/translation";

export { generateStaticParams } from "@/i18n/navigation"

interface Props {
  children: React.ReactNode;
  params: Promise<{ locale: typeof Translation.locale }>
}

export default function RootLayout({ children, params }: Props) {
  const { locale } = await params;
  if (!Translation.locales.includes(locale)) return;
  setRequestLocale(locale);

  return (
    <html lang={locale}>
      <body>
        <Translation>
          {children}
        </Translation>
      </body>
    </html>
  );
}

middleware.ts

export { middleware as default } from "@/i18n/navigation";

export const config = {
  matcher: ["/((?!api|static|.*\\..*|_next).*)"],
};

i18n/patch.ts

import patch from "intl-t/patch";
import React from "react";
import jsx from "react/jsx-runtime";

process.env.NODE_ENV !== "development" && patch(React, jsx);

Usage

Now you can use the translation instance in your code:

t("homepage
homepage.title
homepage.welcome
homepage.hero
homepage.hero.cta
");