← Tilbage til bloggen
Terminal output showing a translation script writing de.json and fr.json, alongside a folder tree and a browser rendering the German locale route.

Sådan oversætter du en Next.js-app med PolyLingo på under 30 minutter

By Robert

Sådan oversætter du en Next.js-app med PolyLingo på under 30 minutter

Ved slutningen af denne vejledning vil du have et fungerende flersproget Next.js App Router-projekt: strenge udtrukket til messages/en.json, oversatte lokalefiler for hvert sprog, du har brug for, next-intl, der serverer den rigtige fil pr. rute, og et enkelt Node-script, som du kan køre igen, når dit indhold ændres.

Ingen oversættelsesplatform at tilmelde sig. Ingen faste gebyrer pr. sprog. Ét API-kald håndterer alle dine målsprog på én gang.

Det skal du bruge:

  • Et Next.js-projekt, der bruger App Router (Next.js 14 eller 15)
  • Node.js 18 eller nyere
  • En gratis PolyLingo-konto og API-nøgle

Trin 1: Få din PolyLingo API-nøgle (5 minutter)

Opret en gratis konto på usepolylingo.com. Den gratis plan inkluderer 100.000 tokens pr. måned, hvilket er nok til at oversætte en mellemstor lokalefil til 10+ sprog flere gange.

Når du er logget ind, gå til API keys i dashboardet og opret en nøgle. Du vil kun se den fulde værdi én gang, så kopier den med det samme.

Tilføj den til dit projekt som en miljøvariabel. Forpligt den aldrig til versionskontrol, og eksponer den aldrig i klientkode:

# .env.local
POLYLINGO_API_KEY="pl_your_key_here"

Bekræft, at API'en er tilgængelig, før du går videre:

curl -sS "https://api.usepolylingo.com/v1/health"

Du bør modtage en lille JSON-payload med "status": "ok".

Trin 2: Installer next-intl og opsæt routing (10 minutter)

Installer biblioteket:

npm install next-intl

Opret en i18n.ts-fil i roden af dit projekt. Denne fil fortæller next-intl, hvilke lokaliteter du understøtter, og hvordan den skal indlæse den rigtige beskedfil for hver anmodning:

// i18n.ts
import { getRequestConfig } from 'next-intl/server'

export const locales = ['en', 'de', 'fr'] as const
export type Locale = (typeof locales)[number]
export const defaultLocale: Locale = 'en'

export default getRequestConfig(async ({ requestLocale }) => {
  let locale = await requestLocale
  if (!locale || !locales.includes(locale as Locale)) {
    locale = defaultLocale
  }
  return {
    locale,
    messages: (await import(`./messages/${locale}.json`)).default,
  }
})

Tilføj middleware for at præfikse ruter med lokaliteten:

// middleware.ts
import createMiddleware from 'next-intl/middleware'
import { locales, defaultLocale } from './i18n'

export default createMiddleware({
  locales: [...locales],
  defaultLocale,
  localePrefix: 'as-needed',
})

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

Flyt dine sidefiler under app/[locale]/. Opdater dit rodlayout til at modtage locale-parametret og pakke børnene ind i NextIntlClientProvider:

// app/[locale]/layout.tsx
import { NextIntlClientProvider } from 'next-intl'
import { getMessages } from 'next-intl/server'

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode
  params: Promise<{ locale: string }>
}) {
  const { locale } = await params
  const messages = await getMessages()
  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  )
}

Trin 3: Ekstraher dine strenge til en JSON-beskedfil (10 minutter)

Opret en messages/-mappe i roden af dit projekt. Tilføj en en.json-fil med dine kildetekster. next-intl bruger en indlejret nøglestruktur:

{
  "Home": {
    "title": "Welcome",
    "cta": "Get started"
  }
}

Opdater dine sider til at bruge useTranslations i stedet for hårdkodede strenge:

// app/[locale]/page.tsx
import { useTranslations } from 'next-intl'

export default function HomePage() {
  const t = useTranslations('Home')
  return (
    <main>
      <h1>{t('title')}</h1>
      <button type="button">{t('cta')}</button>
    </main>
  )
}

Skriv nu oversættelsesskriptet. Det læser messages/en.json, sender det til PolyLingo API med format: "json" og skriver én outputfil pr. mållokalitet. Flaget format: "json" fortæller API'en at bevare nøglestrukturen og kun oversætte strengværdier — indlejrede nøgler, arrays og ikke-streng-typer forbliver uberørte.

// scripts/translate-messages.mjs
// Run with: node scripts/translate-messages.mjs

import fs from 'node:fs'
import path from 'node:path'

const API_KEY = process.env.POLYLINGO_API_KEY
const API_URL = (process.env.POLYLINGO_API_URL || 'https://api.usepolylingo.com/v1').replace(/\/$/, '')
const TARGETS = ['de', 'fr'] // extend this array to add more locales

const enPath = path.join('messages', 'en.json')
const en = JSON.parse(fs.readFileSync(enPath, 'utf8'))

const res = await fetch(`${API_URL}/translate`, {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    content: JSON.stringify(en),
    format: 'json',
    targets: TARGETS,
    model: 'standard',
  }),
})

if (!res.ok) {
  const err = await res.text()
  throw new Error(`PolyLingo ${res.status}: ${err}`)
}

const { translations } = await res.json()

for (const locale of TARGETS) {
  const out = path.join('messages', `${locale}.json`)
  fs.writeFileSync(out, JSON.stringify(JSON.parse(translations[locale]), null, 2) + '\n')
  console.log('Wrote', out)
}

Kør det:

node scripts/translate-messages.mjs

Du bør se output som:

Wrote messages/de.json
Wrote messages/fr.json

Åbn disse filer og tjek dem. Dine nøgler vil være identiske med en.json. Kun strengværdierne vil være ændret.

Trin 4: Røgtest ruterne (5 minutter)

Start din udviklingsserver:

npm run dev

Besøg http://localhost:3000 og http://localhost:3000/de. Overskriften og knappen skal gengives på henholdsvis engelsk og tysk. Tilføj flere lokaliteter ved at udvide TARGETS-arrayet i scriptet og locales-arrayet i i18n.ts, og kør derefter scriptet igen.

Tjek dit tokenforbrug i PolyLingo-dashboardet under Usage. For en lille lokalefil oversat til to sprog har du brugt et par hundrede tokens af din månedlige kvote.

Hvor går du hen herfra

Tilføj flere lokaliteter. Scriptet sender én anmodning uanset hvor mange poster der er i TARGETS. Tilføjelse af japansk, spansk og arabisk koster ét API-kald, ikke tre.

Integrer det i CI. Tilføj POLYLINGO_API_KEY som et repository secret i GitHub Actions og kør scriptet som en del af din build-pipeline. Dine lokalefiler holdes automatisk synkroniserede, når en.json ændres.

Oversæt andre formater. Samme scriptmønster fungerer for Markdown dokumentationssider (format: "markdown") og HTML e-mail skabeloner (format: "html"). API'en bevarer strukturen i alle tilfælde.

Brug batch-endpointet til større projekter. Hvis du har flere separate JSON-filer (én pr. funktionsområde, for eksempel), accepterer POST /translate/batch op til 100 elementer i en enkelt anmodning, hver med sit eget id og format.

Prøv det gratis

PolyLingos gratis plan inkluderer 100.000 tokens pr. måned. Ingen kreditkort kræves.

curl -sS -X POST "https://api.usepolylingo.com/v1/translate" \
  -H "Authorization: Bearer $POLYLINGO_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "content": "{\"Home\":{\"title\":\"Welcome\",\"cta\":\"Get started\"}}",
    "format": "json",
    "targets": ["de", "fr", "es", "ja"]
  }'

Få din API-nøgle