Jak zbudować nowoczesną aplikację webową AI z i18n w 2026 roku
Kompletny przewodnik po tworzeniu wielojęzycznych aplikacji z Lingui i tłumaczeniami AI. Automatyczna obsługa 17 języków przy użyciu Next.js, Claude i T3 Turbo.
Feng LiuSłuchajcie, musimy pogadać o i18n w 2026 roku.
Większość tutoriali powie wam, żebyście ręcznie tłumaczyli stringi, zatrudniali tłumaczy albo używali jakiegoś koślawego API Google Translate. Ale sprawa wygląda tak: żyjecie w erze Claude Sonnet 4.5. Dlaczego tłumaczycie tak, jakby był 2019?
Pokażę wam, jak zbudowaliśmy produkcyjną aplikację webową, która płynnie mówi w 17 językach, używając dwuczęściowej architektury i18n, która faktycznie ma sens:
- Lingui do ekstrakcji, kompilacji i magii w runtime
- Niestandardowa paczka i18n napędzana przez LLM do automatycznych, świadomych kontekstu tłumaczeń
Nas tech stack? Create T3 Turbo z Next.js, tRPC, Drizzle, Postgres, Tailwind i AI SDK. Jeśli nie używacie tego w 2026 roku, to musimy odbyć zupełnie inną rozmowę.
Bierzmy się do roboty.
Problem z tradycyjnym i18n
Tradycyjny workflow i18n wygląda tak:
# Wyciągnij stringi (teksty)
$ lingui extract
# ??? Jakoś zdobądź tłumaczenia ???
# (zatrudnij tłumaczy, użyj podejrzanych serwisów, płacz)
# Skompiluj
$ lingui compile
Ten środkowy krok? To koszmar. Albo:
- Płacisz $$$ za ludzkich tłumaczy (wolno, drogo)
- Używasz podstawowych API do tłumaczenia (ślepe na kontekst, brzmią jak robot)
- Tłumaczysz ręcznie (nie do wyskalowania)
My robimy to lepiej.
Dwuczęściowa Architektura
Oto nasza konfiguracja:
┌─────────────────────────────────────────────┐
│ Aplikacja Next.js (Integracja Lingui) │
│ ├─ Wyciąganie stringów za pomocą makr │
│ ├─ Komponenty Trans/t w twoim kodzie │
│ └─ Runtime i18n ze skompilowanymi katalogami│
└─────────────────────────────────────────────┘
↓ generuje pliki .po
┌─────────────────────────────────────────────┐
│ Paczka @acme/i18n (Tłumaczenie LLM) │
│ ├─ Czyta pliki .po │
│ ├─ Tłumaczy wsadowo (batch) z Claude/GPT-5 │
│ ├─ Świadomość kontekstu i produktu │
│ └─ Zapisuje przetłumaczone pliki .po │
└─────────────────────────────────────────────┘
↓ kompiluje do TypeScript
┌─────────────────────────────────────────────┐
│ Skompilowane Katalogi Wiadomości │
│ └─ Szybkie, bezpieczne typowo tłumaczenia │
└─────────────────────────────────────────────┘
Część 1 (Lingui) obsługuje doświadczenie programisty (DX). Część 2 (Niestandardowa paczka i18n) obsługuje magię tłumaczenia.
Zanurkujmy w każdą z nich.
Część 1: Konfiguracja Lingui w Next.js
Instalacja
W twoim monorepo T3 Turbo:
# W apps/nextjs
pnpm add @lingui/core @lingui/react @lingui/macro
pnpm add -D @lingui/cli @lingui/swc-plugin
Konfiguracja Lingui
Stwórz apps/nextjs/lingui.config.ts:
import type { LinguiConfig } from "@lingui/conf";
const config: LinguiConfig = {
locales: [
"en", "zh_CN", "zh_TW", "ja", "ko",
"de", "fr", "es", "pt", "ar", "it",
"ru", "tr", "th", "id", "vi", "hi"
],
sourceLocale: "en",
fallbackLocales: {
default: "en"
},
catalogs: [
{
path: "<rootDir>/src/locales/{locale}/messages",
include: ["src"],
},
],
};
export default config;
17 języków na start. Bo dlaczego nie?
Integracja z Next.js
Zaktualizuj next.config.js, aby używać pluginu SWC od Lingui:
const linguiConfig = require("./lingui.config");
module.exports = {
experimental: {
swcPlugins: [
[
"@lingui/swc-plugin",
{
// To przyspiesza twoje buildy
},
],
],
},
// ... reszta twojej konfiguracji
};
Konfiguracja po stronie serwera (Server-Side)
Stwórz src/utils/i18n/appRouterI18n.ts:
import { setupI18n } from "@lingui/core";
import { allMessages } from "./initLingui";
const locales = ["en", "zh_CN", "zh_TW", /* ... */] as const;
const instances = new Map<string, ReturnType<typeof setupI18n>>();
// Wstępnie utwórz instancje i18n dla wszystkich języków
locales.forEach((locale) => {
const i18n = setupI18n({
locale,
messages: { [locale]: allMessages[locale] },
});
instances.set(locale, i18n);
});
export function getI18nInstance(locale: string) {
return instances.get(locale) ?? instances.get("en")!;
}
Dlaczego? Komponenty Serwerowe (Server Components) nie mają React Context. To daje wam tłumaczenia po stronie serwera.
Provider po stronie klienta (Client-Side)
Stwórz src/providers/LinguiClientProvider.tsx:
"use client";
import { I18nProvider } from "@lingui/react";
import { setupI18n } from "@lingui/core";
import { useEffect, useState } from "react";
export function LinguiClientProvider({
children,
locale,
messages
}: {
children: React.ReactNode;
locale: string;
messages: any;
}) {
const [i18n] = useState(() =>
setupI18n({
locale,
messages: { [locale]: messages },
})
);
useEffect(() => {
i18n.load(locale, messages);
i18n.activate(locale);
}, [locale, messages, i18n]);
return <I18nProvider i18n={i18n}>{children}</I18nProvider>;
}
Owiń swoją aplikację w layout.tsx:
import { LinguiClientProvider } from "@/providers/LinguiClientProvider";
import { getLocale } from "@/utils/i18n/localeDetection";
import { allMessages } from "@/utils/i18n/initLingui";
export default function RootLayout({ children }: { children: React.ReactNode }) {
const locale = getLocale();
return (
<html lang={locale}>
<body>
<LinguiClientProvider locale={locale} messages={allMessages[locale]}>
{children}
</LinguiClientProvider>
</body>
</html>
);
}
Używanie tłumaczeń w kodzie
W Komponentach Serwerowych:
import { msg } from "@lingui/core/macro";
import { getI18nInstance } from "@/utils/i18n/appRouterI18n";
export async function generateMetadata({ params }) {
const locale = getLocale();
const i18n = getI18nInstance(locale);
return {
title: i18n._(msg`Pricing Plans | acme`),
description: i18n._(msg`Choose the perfect plan for you`),
};
}
W Komponentach Klienckich:
"use client";
import { Trans, useLingui } from "@lingui/react/macro";
export function PricingCard() {
const { t } = useLingui();
return (
<div>
<h1><Trans>Pricing Plans</Trans></h1>
<p>{t`Ultimate entertainment experience`}</p>
{/* Ze zmiennymi */}
<p>{t`${credits} credits remaining`}</p>
</div>
);
}
Składnia makr to KLUCZ. Lingui wyciąga te teksty podczas budowania aplikacji (build time).
Część 2: Paczka Tłumaczeniowa napędzana AI
Tutaj zaczyna się robić gorąco.
Struktura Paczki
Stwórz packages/i18n/:
packages/i18n/
├── package.json
├── src/
│ ├── translateWithLLM.ts # Główne tłumaczenie LLM
│ ├── enhanceTranslations.ts # Procesor wsadowy (batch)
│ └── utils.ts # Pomocniki
package.json
{
"name": "@acme/i18n",
"version": "0.1.0",
"dependencies": {
"@acme/ai": "workspace:*",
"openai": "^4.77.3",
"pofile": "^1.1.4",
"zod": "^3.23.8"
}
}
Silnik Tłumaczeń LLM
Oto sekretny składnik – translateWithLLM.ts:
import { openai } from "@ai-sdk/openai";
import { generateText } from "ai";
import { z } from "zod";
const translationSchema = z.object({
translations: z.array(
z.object({
msgid: z.string(),
msgstr: z.string(),
})
),
});
export async function translateWithLLM(
messages: Array<{ msgid: string; msgstr: string }>,
targetLocale: string,
options?: { model?: string }
) {
const prompt = `You are a professional translator for acme, an AI-powered creative platform.
Translate the following strings from English to ${getLanguageName(targetLocale)}.
CONTEXT:
- acme is a platform for AI chat, image generation, and creative content
- Keep brand names unchanged (acme, Claude, etc.)
- Preserve HTML tags, variables like {count}, and placeholders
- Adapt culturally where appropriate
- Maintain tone: friendly, creative, engaging
STRINGS TO TRANSLATE:
${JSON.stringify(messages, null, 2)}
Return a JSON object with this structure:
{
"translations": [
{ "msgid": "original", "msgstr": "translation" },
...
]
}`;
const result = await generateText({
model: openai(options?.model ?? "gpt-4o"),
prompt,
temperature: 0.3, // Niższa = bardziej spójna
});
const parsed = translationSchema.parse(JSON.parse(result.text));
return parsed.translations;
}
function getLanguageName(locale: string): string {
const names: Record<string, string> = {
zh_CN: "Simplified Chinese",
zh_TW: "Traditional Chinese",
ja: "Japanese",
ko: "Korean",
de: "German",
fr: "French",
es: "Spanish",
pt: "Portuguese",
ar: "Arabic",
// ... itd.
};
return names[locale] ?? locale;
}
Dlaczego to działa:
- Świadomość kontekstu: LLM wie, czym jest "acme".
- Ustrukturyzowane wyjście: Schemat Zod zapewnia poprawny JSON.
- Niska temperatura: Spójne tłumaczenia.
- Zachowuje formatowanie: HTML i zmienne pozostają nienaruszone.
Procesor Tłumaczeń Wsadowych (Batch)
Stwórz enhanceTranslations.ts:
import fs from "fs";
import path from "path";
import pofile from "pofile";
import { translateWithLLM } from "./translateWithLLM";
const BATCH_SIZE = 30; // Tłumacz 30 stringów na raz
const DELAY_MS = 1000; // Rate limiting
export async function enhanceTranslations(
locale: string,
catalogPath: string
) {
const poPath = path.join(catalogPath, locale, "messages.po");
const po = pofile.parse(fs.readFileSync(poPath, "utf-8"));
// Znajdź nieprzetłumaczone elementy
const untranslated = po.items.filter(
(item) => item.msgid && (!item.msgstr || item.msgstr[0] === "")
);
if (untranslated.length === 0) {
console.log(`✓ ${locale}: All strings translated`);
return;
}
console.log(`Translating ${untranslated.length} strings for ${locale}...`);
// Przetwarzaj partiami
for (let i = 0; i < untranslated.length; i += BATCH_SIZE) {
const batch = untranslated.slice(i, i + BATCH_SIZE);
const messages = batch.map((item) => ({
msgid: item.msgid,
msgstr: item.msgstr?.[0] ?? "",
}));
try {
const translations = await translateWithLLM(messages, locale);
// Zaktualizuj plik PO
translations.forEach((translation, index) => {
const item = batch[index];
if (item) {
item.msgstr = [translation.msgstr];
}
});
console.log(` ${i + batch.length}/${untranslated.length} translated`);
// Zapisz postęp
fs.writeFileSync(poPath, po.toString());
// Rate limiting
if (i + BATCH_SIZE < untranslated.length) {
await new Promise((resolve) => setTimeout(resolve, DELAY_MS));
}
} catch (error) {
console.error(` Error translating batch: ${error}`);
// Kontynuuj z następną partią
}
}
console.log(`✓ ${locale}: Translation complete!`);
}
Przetwarzanie wsadowe zapobiega limitom tokenów i oszczędza koszty.
Skrypt Tłumaczący
Stwórz apps/nextjs/script/i18n.ts:
import { enhanceTranslations } from "@acme/i18n";
import { exec } from "child_process";
import { promisify } from "util";
const execAsync = promisify(exec);
const LOCALES = [
"zh_CN", "zh_TW", "ja", "ko", "de",
"fr", "es", "pt", "ar", "it", "ru"
];
async function main() {
// Krok 1: Wyciągnij stringi z kodu
console.log("📝 Extracting strings...");
await execAsync("pnpm run lingui:extract --clean");
// Krok 2: Automatycznie przetłumacz brakujące stringi
console.log("\n🤖 Translating with AI...");
const catalogPath = "./src/locales";
for (const locale of LOCALES) {
await enhanceTranslations(locale, catalogPath);
}
// Krok 3: Skompiluj do TypeScript
console.log("\n⚡ Compiling catalogs...");
await execAsync("npx lingui compile --typescript");
console.log("\n✅ Done! All translations updated.");
}
main().catch(console.error);
Dodaj do package.json:
{
"scripts": {
"i18n": "tsx script/i18n.ts",
"lingui:extract": "lingui extract",
"lingui:compile": "lingui compile --typescript"
}
}
Uruchamianie twojego pipeline'u i18n
# Jedna komenda, by rządzić wszystkimi
$ pnpm run i18n
📝 Extracting strings...
Catalog statistics for src/locales/{locale}/messages:
┌──────────┬─────────────┬─────────┐
│ Language │ Total count │ Missing │
├──────────┼─────────────┼─────────┤
│ en │ 847 │ 0 │
│ zh_CN │ 847 │ 123 │
│ ja │ 847 │ 89 │
└──────────┴─────────────┴─────────┘
🤖 Translating with AI...
Translating 123 strings for zh_CN...
30/123 translated
60/123 translated
90/123 translated
123/123 translated
✓ zh_CN: Translation complete!
⚡ Compiling catalogs...
✅ Done! All translations updated.
To wszystko. Dodajesz nowy string w kodzie, uruchamiasz pnpm i18n, bum – przetłumaczone na 17 języków.
Przełączanie Języków
Nie zapomnijcie o UX. Oto przełącznik języków:
"use client";
import { useLocaleSwitcher } from "@/hooks/useLocaleSwitcher";
import { useLocale } from "@/hooks/useLocale";
const LOCALES = {
en: "English",
zh_CN: "简体中文",
zh_TW: "繁體中文",
ja: "日本語",
ko: "한국어",
// ... itd.
};
export function LocaleSelector() {
const currentLocale = useLocale();
const { switchLocale } = useLocaleSwitcher();
return (
<select
value={currentLocale}
onChange={(e) => switchLocale(e.target.value)}
>
{Object.entries(LOCALES).map(([code, name]) => (
<option key={code} value={code}>
{name}
</option>
))}
</select>
);
}
Implementacja hooka:
// hooks/useLocaleSwitcher.tsx
"use client";
import { setUserLocale } from "@/utils/i18n/localeDetection";
export function useLocaleSwitcher() {
const switchLocale = (locale: string) => {
setUserLocale(locale);
window.location.reload(); // Wymuś przeładowanie, aby zastosować język
};
return { switchLocale };
}
Zapisz preferencję w ciasteczku:
// utils/i18n/localeDetection.ts
import { cookies } from "next/headers";
export function setUserLocale(locale: string) {
cookies().set("NEXT_LOCALE", locale, {
maxAge: 365 * 24 * 60 * 60, // 1 rok
});
}
export function getLocale(): string {
const cookieStore = cookies();
return cookieStore.get("NEXT_LOCALE")?.value ?? "en";
}
Zaawansowane: Bezpieczne Typowo Tłumaczenia
Chcecie bezpieczeństwa typów? Lingui o to zadbał:
// Zamiast tego:
t`Hello ${name}`
// Użyj deskryptora msg:
import { msg } from "@lingui/core/macro";
const greeting = msg`Hello ${name}`;
const translated = i18n._(greeting);
Twoje IDE podpowie klucze tłumaczeń. Piękne.
Rozważania o Wydajności
1. Kompilacja w Czasie Budowania (Build Time)
Lingui kompiluje tłumaczenia do zminifikowanego JSON-a. Brak narzutu na parsowanie w runtime.
// Skompilowane wyjście (zminifikowane):
export const messages = JSON.parse('{"ICt8/V":["视频"],"..."}');
2. Wstępne Ładowanie Katalogów Serwerowych
Załaduj wszystkie katalogi raz przy starcie (zobacz appRouterI18n.ts powyżej). Brak operacji I/O na plikach przy każdym żądaniu.
3. Rozmiar Paczki Klienckiej
Wysyłaj do klienta tylko aktywny język:
<LinguiClientProvider
locale={locale}
messages={allMessages[locale]} // Tylko jeden język
>
4. Optymalizacja Kosztów LLM
- Tłumaczenia wsadowe: 30 stringów na jedno wywołanie API
- Cache'owanie tłumaczeń: Nie tłumacz ponownie niezmienionych stringów
- Używaj tańszych modeli: GPT-4o-mini dla mniej krytycznych języków
Nasz koszt? ~$2-3 za 800+ stringów × 16 języków. Grosze w porównaniu do ludzkich tłumaczy.
Integracja z Pełnym Stosem Technologicznym
Zobaczmy, jak to gra z resztą T3 Turbo:
tRPC z i18n
// server/api/routers/user.ts
import { createTRPCRouter, publicProcedure } from "../trpc";
import { msg } from "@lingui/core/macro";
export const userRouter = createTRPCRouter({
subscribe: publicProcedure
.mutation(async ({ ctx }) => {
// Błędy też mogą być tłumaczone!
if (!ctx.session?.user) {
throw new TRPCError({
code: "UNAUTHORIZED",
message: ctx.i18n._(msg`You must be logged in`),
});
}
// ... logika subskrypcji
}),
});
Przekaż instancję i18n przez kontekst:
// server/api/trpc.ts
import { getI18nInstance } from "@/utils/i18n/appRouterI18n";
export const createTRPCContext = async (opts: CreateNextContextOptions) => {
const locale = getLocale();
const i18n = getI18nInstance(locale);
return {
session: await getServerAuthSession(),
i18n,
locale,
};
};
Baza Danych z Drizzle
Przechowuj preferencje językowe użytkownika:
// packages/db/schema/user.ts
import { pgTable, text, varchar } from "drizzle-orm/pg-core";
export const users = pgTable("user", {
id: varchar("id", { length: 255 }).primaryKey(),
locale: varchar("locale", { length: 10 }).default("en"),
// ... inne pola
});
Integracja z AI SDK
Tłumacz odpowiedzi AI w locie:
import { openai } from "@ai-sdk/openai";
import { generateText } from "ai";
import { useLingui } from "@lingui/react/macro";
export function useAIChat() {
const { i18n } = useLingui();
const chat = async (prompt: string) => {
const systemPrompt = i18n._(msg`You are a helpful AI assistant for acme.`);
return generateText({
model: openai("gpt-4"),
messages: [
{ role: "system", content: systemPrompt },
{ role: "user", content: prompt },
],
});
};
return { chat };
}
Najlepsze Praktyki, Których Się Nauczyliśmy
1. Zawsze Używaj Makr
// ❌ Źle: Tłumaczenie w runtime (nie zostanie wyciągnięte)
const text = t("Hello world");
// ✅ Dobrze: Makro (wyciągnięte podczas builda)
const text = t`Hello world`;
2. Kontekst jest Wszystkim
Dodawaj komentarze dla tłumaczy:
// i18n: This appears in the pricing table header
<Trans>Monthly</Trans>
// i18n: Button to submit payment form
<button>{t`Subscribe Now`}</button>
Lingui wyciąga je jako notatki dla tłumacza.
3. Obsługuj Liczbę Mnogą Poprawnie
import { Plural } from "@lingui/react/macro";
<Plural
value={count}
one="# credit remaining"
other="# credits remaining"
/>
Różne języki mają różne zasady liczby mnogiej. Lingui to ogarnia.
4. Formatowanie Dat/Liczb
Używaj API Intl:
const date = new Intl.DateTimeFormat(locale, {
dateStyle: "long",
}).format(new Date());
const price = new Intl.NumberFormat(locale, {
style: "currency",
currency: "USD",
}).format(29.99);
5. Wsparcie dla RTL
Dla arabskiego, obsłuż kierunek tekstu:
export default function RootLayout({ children }) {
const locale = getLocale();
const direction = locale === "ar" ? "rtl" : "ltr";
return (
<html lang={locale} dir={direction}>
<body>{children}</body>
</html>
);
}
Dodaj do konfiguracji Tailwind:
module.exports = {
plugins: [
require('tailwindcss-rtl'),
],
};
Używaj klas kierunkowych:
<div className="ms-4"> {/* margin-start, działa dla LTR i RTL */}
Lista Kontrolna Wdrożenia
Zanim zrobisz ship:
- Uruchom
pnpm i18n, aby upewnić się, że wszystkie tłumaczenia są aktualne - Przetestuj każdy język w trybie produkcyjnym
- Zweryfikuj trwałość ciasteczka z językiem
- Sprawdź układ RTL dla arabskiego
- Przetestuj UX przełącznika języków
- Dodaj tagi hreflang dla SEO
- Skonfiguruj routing oparty na języku, jeśli to konieczne
- Monitoruj koszty tłumaczeń LLM
Wyniki
Po wdrożeniu tego systemu:
- 17 obsługiwanych języków na start
- ~850 stringów przetłumaczonych automatycznie
- $2-3 całkowitego kosztu za pełne tłumaczenie
- 2-minutowy cykl aktualizacji przy dodawaniu nowych stringów
- Zero ręcznej pracy przy tłumaczeniach
- Wysokiej jakości tłumaczenia świadome kontekstu
Porównajcie to z:
- Ludzkimi tłumaczami: $0.10-0.30 za słowo = $1,000+
- Tradycyjnymi serwisami: Wciąż drogo, wciąż wolno
- Pracą ręczną: Nie skaluje się
Dlaczego to ma znaczenie w 2026
Słuchajcie, sieć jest globalna. Jeśli w 2026 roku shipujecie tylko po angielsku, zostawiacie 90% świata w tyle.
Ale tradycyjne i18n jest bolesne. To podejście czyni je trywialnym:
- Piszesz kod z makrami Trans/t (zajmuje 2 sekundy)
- Uruchamiasz
pnpm i18n(automat) - Shipujesz na świat (zysk)
Połączenie doświadczenia programisty (DX) Lingui + tłumaczeń napędzanych LLM zmienia zasady gry. Dostajecie:
- Bezpieczne typowo tłumaczenia
- Zerowy narzut w runtime
- Automatyczną ekstrakcję
- Tłumaczenia AI świadome kontekstu
- Grosze za język
- Nieskończoną skalowalność
Idąc Dalej
Chcecie wejść na wyższy poziom? Spróbujcie:
Tłumaczenie Treści Dynamicznych
Przechowuj tłumaczenia w bazie danych:
// packages/db/schema/content.ts
export const blogPosts = pgTable("blog_post", {
id: varchar("id", { length: 255 }).primaryKey(),
titleEn: text("title_en"),
titleZhCn: text("title_zh_cn"),
titleJa: text("title_ja"),
// ... itd.
});
Automatyczne tłumaczenie przy zapisie:
import { translateWithLLM } from "@acme/i18n";
export const blogRouter = createTRPCRouter({
create: protectedProcedure
.input(z.object({ title: z.string() }))
.mutation(async ({ input }) => {
// Przetłumacz na wszystkie języki
const translations = await Promise.all(
LOCALES.map(async (locale) => {
const result = await translateWithLLM(
[{ msgid: input.title, msgstr: "" }],
locale
);
return [locale, result[0].msgstr];
})
);
await db.insert(blogPosts).values({
id: generateId(),
titleEn: input.title,
...Object.fromEntries(translations),
});
}),
});
Tłumaczenia Dostarczane przez Użytkowników
Pozwól użytkownikom przesyłać lepsze tłumaczenia:
export const i18nRouter = createTRPCRouter({
suggestTranslation: publicProcedure
.input(z.object({
msgid: z.string(),
locale: z.string(),
suggestion: z.string(),
}))
.mutation(async ({ input }) => {
await db.insert(translationSuggestions).values(input);
// Powiadom opiekunów projektu
await sendEmail({
to: "i18n@acme.com",
subject: `New translation suggestion for ${input.locale}`,
body: `"${input.msgid}" → "${input.suggestion}"`,
});
}),
});
Testy A/B Tłumaczeń
Testuj, które tłumaczenia konwertują lepiej:
const variant = await abTest.getVariant("pricing-cta", locale);
const ctaText = variant === "A"
? t`Start Your Free Trial`
: t`Try acme Free`;
Kod
Wszystko to jest kodem produkcyjnym z prawdziwej aplikacji. Pełna implementacja znajduje się w naszym monorepo:
t3-acme-app/
├── apps/nextjs/
│ ├── lingui.config.ts
│ ├── src/
│ │ ├── locales/ # Skompilowane katalogi
│ │ ├── utils/i18n/ # Narzędzia i18n
│ │ └── providers/ # LinguiClientProvider
│ └── script/i18n.ts # Skrypt tłumaczeniowy
└── packages/i18n/
└── src/
├── translateWithLLM.ts
├── enhanceTranslations.ts
└── utils.ts
Przemyślenia Końcowe
Budowanie wielojęzycznej aplikacji AI w 2026 roku nie jest już trudne. Narzędzia są tutaj:
- Lingui do ekstrakcji i runtime'u
- Claude/GPT do tłumaczeń świadomych kontekstu
- T3 Turbo dla najlepszego DX w grze
Przestańcie płacić tysiące dolarów za tłumaczenia. Przestańcie ograniczać swoją aplikację tylko do angielskiego.
Budujcie globalnie. Shipujcie szybko. Używajcie AI.
Tak to robimy w 2026.
Pytania? Problemy? Znajdźcie mnie na Twitterze lub sprawdźcie dokumentację Lingui oraz dokumentację AI SDK.
A teraz idźcie shipować tę wielojęzyczną apkę. Świat czeka.
Udostępnij to
Feng Liu
shenjian8628@gmail.com