← Tillbaka till 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.

Hur man översätter en Next.js-app med PolyLingo på under 30 minuter

By Robert

Hur man översätter en Next.js-app med PolyLingo på under 30 minuter

I slutet av denna handledning kommer du att ha ett fungerande flerspråkigt Next.js App Router-projekt: strängar extraherade till messages/en.json, översatta lokaliseringsfiler för varje språk du behöver, next-intl som serverar rätt fil per rutt, och ett enda Node-skript som du kan köra om när ditt innehåll ändras.

Ingen översättningsplattform att registrera sig på. Inga fasta avgifter per språk. Ett API-anrop hanterar alla dina målspråk samtidigt.

Vad du behöver:

  • Ett Next.js-projekt som använder App Router (Next.js 14 eller 15)
  • Node.js 18 eller senare
  • Ett gratis PolyLingo-konto och API-nyckel

Steg 1: Skaffa din PolyLingo API-nyckel (5 minuter)

Skapa ett gratis konto på usepolylingo.com. Gratisnivån inkluderar 100 000 tokens per månad, vilket räcker för att översätta en lokaliseringsfil i medelstorlek till 10+ språk flera gånger.

När du är inloggad, gå till API keys i instrumentpanelen och skapa en nyckel. Du ser det fullständiga värdet bara en gång, så kopiera det direkt.

Lägg till det i ditt projekt som en miljövariabel. Committa det aldrig till versionskontroll och exponera det aldrig i klientkod:

# .env.local
POLYLINGO_API_KEY="pl_your_key_here"

Verifiera att API:et är tillgängligt innan du går vidare:

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

Du bör få tillbaka en liten JSON-payload med "status": "ok".

Steg 2: Installera next-intl och konfigurera routing (10 minuter)

Installera biblioteket:

npm install next-intl

Skapa en i18n.ts-fil i projektets rot. Den berättar för next-intl vilka lokaler du stödjer och hur man laddar rätt meddelandefil för varje förfrågan:

// 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,
  }
})

Lägg till middleware för att prefixa rutter med lokal:

// 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|.*\\..*).*)'],
}

Flytta dina sidfiler under app/[locale]/. Uppdatera din root layout för att ta emot locale-parametern och omsluta barn med 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>
  )
}

Steg 3: Extrahera dina strängar till en JSON-meddelandefil (10 minuter)

Skapa en messages/-mapp i projektets rot. Lägg till en en.json-fil med dina källsträngar. next-intl använder en nästlad nyckelstruktur:

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

Uppdatera dina sidor för att använda useTranslations istället för hårdkodade strängar:

// 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 översättningsskriptet. Det läser messages/en.json, skickar det till PolyLingo API med format: "json" och skriver en utdatafil per mål-lokal. Flaggan format: "json" talar om för API:et att bevara nyckelstrukturen och bara översätta strängvärden — nästlade nycklar, arrayer och icke-strängtyper förblir orörda.

// scripts/translate-messages.mjs
// Kör med: 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'] // utöka denna array för att lägga till fler lokaler

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 utdata som:

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

Öppna dessa filer och kontrollera dem. Dina nycklar kommer att vara identiska med en.json. Endast strängvärdena har ändrats.

Steg 4: Snabbtesta rutterna (5 minuter)

Starta din utvecklingsserver:

npm run dev

Besök http://localhost:3000 och http://localhost:3000/de. Rubriken och knappen ska visas på engelska respektive tyska. Lägg till fler lokaler genom att utöka TARGETS-arrayen i skriptet och locales-arrayen i i18n.ts, och kör sedan skriptet igen.

Kontrollera din tokenanvändning i PolyLingo-instrumentpanelen under Usage. För en liten lokaliseringsfil översatt till två språk har du använt några hundra tokens av din månatliga kvot.

Vad du kan göra härnäst

Lägg till fler lokaler. Skriptet skickar en förfrågan oavsett hur många poster som finns i TARGETS. Att lägga till japanska, spanska och arabiska kostar ett API-anrop, inte tre.

Integrera i CI. Lägg till POLYLINGO_API_KEY som en repository-hemlighet i GitHub Actions och kör skriptet som en del av din byggpipeline. Dina lokaliseringsfiler hålls automatiskt synkroniserade när en.json ändras.

Översätt andra format. Samma skriptmönster fungerar för Markdown-dokumentationssidor (format: "markdown") och HTML-e-postmallar (format: "html"). API:et bevarar strukturen i alla fall.

Använd batch-endpoint för större projekt. Om du har flera separata JSON-filer (en per funktionsområde, till exempel) accepterar POST /translate/batch upp till 100 objekt i en enda förfrågan, var och en med eget id och format.

Prova gratis

PolyLingos gratisnivå inkluderar 100 000 tokens per månad. Ingen kreditkort krävs.

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-nyckel