Hvordan bygge en moderne, AI-drevet webapp med i18n i 2026
Komplett guide til å bygge flerspråklige webapper med Lingui + AI-oversettelser. Støtt 17 språk automatisk med Next.js, Claude og T3 Turbo.

Title: Hør her, vi må snakke om i18n i 2026 Excerpt: De fleste i18n-veiledninger sitter fast i fortiden. Slik bygget vi en produksjonsklar webapp som snakker 17 språk flytende ved hjelp av Lingui og en tilpasset AI-arkitektur – for småpenger.
Hør her, vi må snakke om i18n i 2026.
De fleste veiledninger vil fortelle deg at du skal oversette strenger manuelt, leie oversettere, eller bruke en eller annen skranglete Google Translate API. Men her er greia: du lever i Claude Sonnet 4.5-æraen. Hvorfor oversetter du som om det er 2019?
Jeg skal vise deg hvordan vi bygget en produksjonsklar webapp som snakker 17 språk flytende, ved å bruke en todelt i18n-arkitektur som faktisk gir mening:
- Lingui for uthenting, kompilering og runtime-magi
- En tilpasset i18n-pakke drevet av LLM-er for automatiserte, kontekst-sensitive oversettelser
Vår stack? Create T3 Turbo med Next.js, tRPC, Drizzle, Postgres, Tailwind, og AI SDK. Hvis du ikke bruker dette i 2026, må vi ta en helt annen prat.
La oss bygge.
Problemet med tradisjonell i18n
Tradisjonelle arbeidsflyter for i18n ser slik ut:
# Trekk ut strenger
$ lingui extract
# ??? Få tak i oversettelser på en eller annen måte ???
# (lei oversettere, bruk tvilsomme tjenester, gråt)
# Kompiler
$ lingui compile
Det steget i midten? Det er et mareritt. Du ender opp med å enten:
- Betale $$$ for menneskelige oversettere (tregt, dyrt)
- Bruke enkle oversettelses-API-er (kontekst-blinde, høres robotaktig ut)
- Oversette manuelt (skalerer ikke)
Vi gjør det bedre.
Den todelte arkitekturen
Her er oppsettet vårt:
┌─────────────────────────────────────────────┐
│ Next.js App (Lingui Integration) │
│ ├─ Trekk ut strenger med makroer │
│ ├─ Trans/t komponenter i koden din │
│ └─ Runtime i18n med kompilerte kataloger │
└─────────────────────────────────────────────┘
↓ genererer .po filer
┌─────────────────────────────────────────────┐
│ @acme/i18n Package (LLM Translation) │
│ ├─ Leser .po filer │
│ ├─ Batch-oversetter med Claude/GPT-5 │
│ ├─ Kontekst-sensitiv, produkt-spesifikk │
│ └─ Skriver oversatte .po filer │
└─────────────────────────────────────────────┘
↓ kompilerer til TypeScript
┌─────────────────────────────────────────────┐
│ Compiled Message Catalogs │
│ └─ Raske, typesikre runtime-oversettelser │
└─────────────────────────────────────────────┘
Del 1 (Lingui) håndterer utvikleropplevelsen. Del 2 (Tilpasset i18n-pakke) håndterer oversettelsesmagien.
La oss dykke ned i hver del.

Del 1: Oppsett av Lingui i Next.js
Installasjon
I ditt T3 Turbo monorepo:
# I apps/nextjs
pnpm add @lingui/core @lingui/react @lingui/macro
pnpm add -D @lingui/cli @lingui/swc-plugin
Lingui Config
Opprett 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 språk rett ut av boksen. For hvorfor ikke?
Next.js Integrasjon
Oppdater next.config.js for å bruke Lingui sin SWC-plugin:
const linguiConfig = require("./lingui.config");
module.exports = {
experimental: {
swcPlugins: [
[
"@lingui/swc-plugin",
{
// Dette gjør byggene dine raskere
},
],
],
},
// ... resten av konfigurasjonen din
};
Server-Side Oppsett
Opprett 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>>();
// Forhåndsopprett i18n-instanser for alle språk
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")!;
}
Hvorfor? Server Components har ikke React Context. Dette gir deg oversettelser på serversiden.
Client-Side Provider
Opprett 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>;
}
Pakk inn appen din i 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>
);
}
Bruk av oversettelser i koden din
I Server Components:
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`),
};
}
I Client Components:
"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>
{/* Med variabler */}
<p>{t`${credits} credits remaining`}</p>
</div>
);
}
Makro-syntaksen er NØKKELEN. Lingui trekker ut disse ved byggetid.
Del 2: Den AI-drevne oversettelsespakken
Her blir det spennende.
Pakkestruktur
Opprett packages/i18n/:
packages/i18n/
├── package.json
├── src/
│ ├── translateWithLLM.ts # Kjerne LLM-oversettelse
│ ├── enhanceTranslations.ts # Batch-prosessor
│ └── utils.ts # Hjelpefunksjoner
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"
}
}
LLM-oversettelsesmotoren
Her er den hemmelige ingrediensen – 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, // Lavere = mer konsistent
});
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",
// ... osv
};
return names[locale] ?? locale;
}
Hvorfor dette fungerer:
- Kontekst-sensitiv: LLM-en vet hva acme er
- Strukturert output: Zod-skjema sikrer gyldig JSON
- Lav temperatur: Konsistente oversettelser
- Bevarer formatering: HTML og variabler forblir intakte
Batch-oversettelsesprosessor
Opprett enhanceTranslations.ts:
import fs from "fs";
import path from "path";
import pofile from "pofile";
import { translateWithLLM } from "./translateWithLLM";
const BATCH_SIZE = 30; // Oversett 30 strenger om gangen
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"));
// Finn uoversatte elementer
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}...`);
// Prosesser i batcher
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);
// Oppdater PO-fil
translations.forEach((translation, index) => {
const item = batch[index];
if (item) {
item.msgstr = [translation.msgstr];
}
});
console.log(` ${i + batch.length}/${untranslated.length} translated`);
// Lagre fremdrift
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}`);
// Fortsett med neste batch
}
}
console.log(`✓ ${locale}: Translation complete!`);
}
Batch-prosessering forhindrer at du treffer token-grenser og sparer kostnader.
Oversettelsesskriptet
Opprett 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() {
// Steg 1: Trekk ut strenger fra koden
console.log("📝 Extracting strings...");
await execAsync("pnpm run lingui:extract --clean");
// Steg 2: Auto-oversett manglende strenger
console.log("\n🤖 Translating with AI...");
const catalogPath = "./src/locales";
for (const locale of LOCALES) {
await enhanceTranslations(locale, catalogPath);
}
// Steg 3: Kompiler til TypeScript
console.log("\n⚡ Compiling catalogs...");
await execAsync("npx lingui compile --typescript");
console.log("\n✅ Done! All translations updated.");
}
main().catch(console.error);
Legg til i package.json:
{
"scripts": {
"i18n": "tsx script/i18n.ts",
"lingui:extract": "lingui extract",
"lingui:compile": "lingui compile --typescript"
}
}
Kjøring av i18n-pipelinen din
# Én kommando for å styre dem alle
$ 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.
Det er alt. Legg til en ny streng i koden din, kjør pnpm i18n, og vips – oversatt til 17 språk.

Bytte av språk (Locale Switching)
Ikke glem UX-delen. Her er en språkvelger:
"use client";
import { useLocaleSwitcher } from "@/hooks/useLocaleSwitcher";
import { useLocale } from "@/hooks/useLocale";
const LOCALES = {
en: "English",
zh_CN: "简体中文",
zh_TW: "繁體中文",
ja: "日本語",
ko: "한국어",
// ... osv
};
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>
);
}
Implementeringen av hook-en:
// hooks/useLocaleSwitcher.tsx
"use client";
import { setUserLocale } from "@/utils/i18n/localeDetection";
export function useLocaleSwitcher() {
const switchLocale = (locale: string) => {
setUserLocale(locale);
window.location.reload(); // Tving reload for å bruke locale
};
return { switchLocale };
}
Lagre preferansen i en cookie:
// 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 år
});
}
export function getLocale(): string {
const cookieStore = cookies();
return cookieStore.get("NEXT_LOCALE")?.value ?? "en";
}
Avansert: Typesikre oversettelser
Vil du ha typesikkerhet? Lingui har ryggen din:
// I stedet for dette:
t`Hello ${name}`
// Bruk msg descriptor:
import { msg } from "@lingui/core/macro";
const greeting = msg`Hello ${name}`;
const translated = i18n._(greeting);
IDE-en din vil autoutfylle oversettelsesnøkler. Nydelig.
Ytelsesbetraktninger
1. Kompiler ved byggetid
Lingui kompilerer oversettelser til minifisert JSON. Ingen parsing-overhead ved kjøring.
// Kompilert output (minifisert):
export const messages = JSON.parse('{"ICt8/V":["视频"],"..."}');
2. Forhåndslast server-kataloger
Last alle kataloger én gang ved oppstart (se appRouterI18n.ts ovenfor). Ingen fil-I/O ved hver forespørsel.
3. Klient-bundle størrelse
Send kun det aktive språket til klienten:
<LinguiClientProvider
locale={locale}
messages={allMessages[locale]} // Kun ett språk
>
4. LLM Kostnadsoptimalisering
- Batch-oversettelser: 30 strenger per API-kall
- Cache oversettelser: Ikke oversett uendrede strenger på nytt
- Bruk billigere modeller: GPT-4o-mini for mindre kritiske språk
Vår kostnad? ~$2-3 for 800+ strenger × 16 språk. Småpenger sammenlignet med menneskelige oversettere.
Full integrasjon med Tech Stack
La oss se hvordan dette spiller sammen med resten av T3 Turbo:
tRPC med 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 }) => {
// Feilmeldinger kan også oversettes!
if (!ctx.session?.user) {
throw new TRPCError({
code: "UNAUTHORIZED",
message: ctx.i18n._(msg`You must be logged in`),
});
}
// ... abonnementslogikk
}),
});
Send i18n-instansen via context:
// 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,
};
};
Database med Drizzle
Lagre brukerens språkpreferanse:
// 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"),
// ... andre felt
});
AI SDK Integrasjon
Oversett AI-responser i sanntid:
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 };
}
Beste praksis vi lærte
1. Bruk alltid makroer
// ❌ Dårlig: Runtime-oversettelse (blir ikke trukket ut)
const text = t("Hello world");
// ✅ Bra: Makro (trukket ut ved byggetid)
const text = t`Hello world`;
2. Kontekst er alt
Legg til kommentarer for oversettere:
// i18n: This appears in the pricing table header
<Trans>Monthly</Trans>
// i18n: Button to submit payment form
<button>{t`Subscribe Now`}</button>
Lingui trekker ut disse som notater til oversetteren.
3. Håndter flertall riktig
import { Plural } from "@lingui/react/macro";
<Plural
value={count}
one="# credit remaining"
other="# credits remaining"
/>
Ulike språk har ulike regler for flertall. Lingui håndterer det.
4. Dato/Tall-formatering
Bruk Intl API-er:
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. RTL-støtte
For arabisk, håndter retning:
export default function RootLayout({ children }) {
const locale = getLocale();
const direction = locale === "ar" ? "rtl" : "ltr";
return (
<html lang={locale} dir={direction}>
<body>{children}</body>
</html>
);
}
Legg til i Tailwind config:
module.exports = {
plugins: [
require('tailwindcss-rtl'),
],
};
Bruk retningsbestemte klasser:
<div className="ms-4"> {/* margin-start, fungerer for både LTR/RTL */}
Sjekkliste for deployment
Før du shipper:
- Kjør
pnpm i18nfor å sikre at alle oversettelser er oppdaterte - Test hvert språk i produksjonsmodus
- Verifiser at locale-cookien lagres
- Sjekk RTL-layout for arabisk
- Test språkvelgerens UX
- Legg til hreflang-tags for SEO
- Sett opp locale-basert ruting om nødvendig
- Overvåk kostnader for LLM-oversettelse
Resultatene
Etter å ha implementert dette systemet:
- 17 språk støttet rett ut av boksen
- ~850 strenger oversatt automatisk
- $2-3 total kostnad for full oversettelse
- 2-minutters oppdateringssyklus når vi legger til nye strenger
- Null manuelt oversettelsesarbeid
- Kontekst-sensitive oversettelser av høy kvalitet
Sammenlign det med:
- Menneskelige oversettere: $0.10-0.30 per ord = $1,000+
- Tradisjonelle tjenester: Fortsatt dyrt, fortsatt tregt
- Manuelt arbeid: Skalerer ikke
Hvorfor dette betyr noe i 2026
Hør her, nettet er globalt. Hvis du bare shipper på engelsk i 2026, etterlater du 90 % av verden bak deg.
Men tradisjonell i18n er smertefullt. Denne tilnærmingen gjør det trivielt:
- Skriv kode med Trans/t-makroer (tar 2 sekunder)
- Kjør
pnpm i18n(automatisert) - Ship til verden (profitt)
Kombinasjonen av Linguis utvikleropplevelse + LLM-drevne oversettelser er en game-changer. Du får:
- Typesikre oversettelser
- Null overhead ved kjøring
- Automatisk uthenting
- Kontekst-sensitive AI-oversettelser
- Småpenger per språk
- Skalerer uendelig
Gå videre
Vil du ta det til neste nivå? Prøv:
Dynamisk innholdsoversettelse
Lagre oversettelser i databasen din:
// 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"),
// ... osv
});
Auto-oversett ved lagring:
import { translateWithLLM } from "@acme/i18n";
export const blogRouter = createTRPCRouter({
create: protectedProcedure
.input(z.object({ title: z.string() }))
.mutation(async ({ input }) => {
// Oversett til alle språk
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),
});
}),
});
Brukergenererte oversettelser
La brukere sende inn bedre oversettelser:
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);
// Varsle vedlikeholdere
await sendEmail({
to: "i18n@acme.com",
subject: `New translation suggestion for ${input.locale}`,
body: `"${input.msgid}" → "${input.suggestion}"`,
});
}),
});
A/B-testing av oversettelser
Test hvilke oversettelser som konverterer best:
const variant = await abTest.getVariant("pricing-cta", locale);
const ctaText = variant === "A"
? t`Start Your Free Trial`
: t`Try acme Free`;
Koden
Alt dette er produksjonskode fra en ekte app. Den fulle implementasjonen ligger i vårt monorepo:
t3-acme-app/
├── apps/nextjs/
│ ├── lingui.config.ts
│ ├── src/
│ │ ├── locales/ # Compiled catalogs
│ │ ├── utils/i18n/ # i18n utilities
│ │ └── providers/ # LinguiClientProvider
│ └── script/i18n.ts # Translation script
└── packages/i18n/
└── src/
├── translateWithLLM.ts
├── enhanceTranslations.ts
└── utils.ts
Avsluttende tanker
Å bygge en flerspråklig AI-app i 2026 er ikke vanskelig lenger. Verktøyene er her:
- Lingui for uthenting og runtime
- Claude/GPT for kontekst-sensitiv oversettelse
- T3 Turbo for den beste DX-en i gamet
Slutt å betale tusenvis for oversettelser. Slutt å begrense appen din til engelsk.
Bygg globalt. Ship raskt. Bruk AI.
Det er slik vi gjør det i 2026.
Spørsmål? Problemer? Finn meg på Twitter eller sjekk Lingui-dokumentasjonen og AI SDK-dokumentasjonen.
Nå, gå og ship den flerspråklige appen. Verden venter.
Del dette

Feng Liu
shenjian8628@gmail.com