Next.js

Integrieren Sie i1n mit Next.js entweder über next-intl oder direkt über das i1n SDK.

Einrichtung

Führen Sie i1n init in Ihrem Next.js-Projekt aus. Die CLI erkennt next-intl automatisch, falls vorhanden, und konfiguriert das verschachtelte JSON-Format in Ihrem locales/-Verzeichnis.

i1n funktioniert sowohl mit dem App Router als auch mit dem Pages Router. Sie können das i1n SDK im Standalone-Modus verwenden oder es über den Bridge-Modus mit next-intl verbinden.

Eigenständiger Modus

Importieren Sie init und t von i1n, laden Sie Ihre Übersetzungsressourcen und verwenden Sie t() direkt in Ihren Komponenten. Die automatisch generierte Datei i1n.d.ts bietet vollständige Typsicherheit und IDE-Autovervollständigung.

Dieser Ansatz ersetzt next-intl vollständig. Verwenden Sie init(), um Ressourcen zu laden, und setLocale(), um die Sprache zu wechseln. Es ist keine zusätzliche i18n-Bibliothek erforderlich.

Bridge-Modus mit next-intl

Wenn Ihr Projekt bereits next-intl verwendet, verbinden Sie es mit einer einzigen Zeile mit i1n: registerI1n((key, params) => nextIntlT(key, params)). Dies bewahrt Ihre bestehende next-intl-Einrichtung und fügt die typsichere Autovervollständigung von i1n hinzu.

i1n verwaltet die Übersetzungsdateien, KI-Übersetzungen und die Typengenerierung. next-intl kümmert sich weiterhin um das Laufzeit-Laden, Serverkomponenten und Routing. Sie erhalten die Vorteile beider Systeme ohne Migrationskosten.

Bereitstellung

Fügen Sie i1n pull zu Ihrem Build-Schritt oder Ihrer CI/CD-Pipeline hinzu, um sicherzustellen, dass Übersetzungen vor der Bereitstellung immer synchronisiert sind.

Die statische Generierung (SSG) und serverseitige Rendering (SSR) von Next.js funktionieren nahtlos mit von i1n verwalteten Übersetzungsdateien.

app/[locale]/page.tsx

import { t } from 'i1n'

export default function HomePage() {
  return (
    <main>
      <h1>{t('home.title')}</h1>
      <p>{t('home.subtitle')}</p>
    </main>
  )
}

Bridge Mode — src/i18n.ts

import { registerI1n } from 'i1n'
import { useTranslations } from 'next-intl'

const t = useTranslations()
registerI1n((key, params) => t(key, params))

Verwandt

Armaturenbrett

Leitfaden für das i1n-Web-Dashboard: Kontoerstellung, Organisationen, API-Schlüssel, Übersetzungsbearbeitung und Teamverwaltung.

Bridge-Modus

Behalten Sie Ihre bestehende i18n-Bibliothek bei und fügen Sie gleichzeitig die typsichere Autovervollständigung, KI-Übersetzung und Dateiverwaltung von i1n hinzu.