Warum sollten Sie Intlayer in Betracht ziehen?

Was ist Intlayer?

Intlayer ist eine Internationalisierungsbibliothek (i18n), die speziell für JavaScript-Entwickler entwickelt wurde. Sie ermöglicht es Ihnen, Ihre Inhalte überall direkt in Ihrem Code zu deklarieren. Sie wandelt Deklarationen von mehrsprachigen Inhalten in strukturierte Wörterbücher um, die sich einfach in Ihren Code integrieren lassen. Durch die Verwendung von TypeScript macht Intlayer Ihre Entwicklung robuster und effizienter.

Warum Intlayer gegenüber Alternativen?

Im Vergleich zu führenden Lösungen wie next-intl oder i18next bietet Intlayer integrierte Optimierungen wie:

Warum wurde Intlayer entwickelt?

Intlayer wurde entwickelt, um ein häufiges Problem zu lösen, das alle gängigen i18n-Bibliotheken wie next-intl, react-i18next, react-intl, next-i18next, react-intl und vue-i18n betrifft.

Alle diese Lösungen verfolgen einen zentralisierten Ansatz zur Auflistung und Verwaltung Ihrer Inhalte. Zum Beispiel:

.├── locales│   ├── en.json│   ├── es.json│   └── fr.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

Oder hier unter Verwendung von Namespaces:

.├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

Diese Art von Architektur verlangsamt den Entwicklungsprozess und macht die Codebasis aus mehreren Gründen komplexer zu warten:

1. Für jede neu erstellte Komponente müssen Sie:

   • Die neue Ressource/den Namespace im Ordner locales erstellen
   • Daran denken, den neuen Namespace in Ihrer Seite zu importieren
   • Ihre Inhalte übersetzen (oft manuell per Copy-Paste von KI-Anbietern)

2. Für jede an Ihren Komponenten vorgenommene Änderung müssen Sie:

   • Nach der zugehörigen Ressource/dem Namespace suchen (weit entfernt von der Komponente)
   • Ihre Inhalte übersetzen
   • Sicherstellen, dass Ihre Inhalte für jede Sprache auf dem neuesten Stand sind
   • Überprüfen, ob Ihr Namespace keine ungenutzten Schlüssel/Werte enthält
   • Sicherstellen, dass die Struktur Ihrer JSON-Dateien für alle Sprachen gleich ist

Bei professionellen Projekten, die diese Lösungen nutzen, werden häufig Lokalisierungsplattformen eingesetzt, um die Übersetzung Ihrer Inhalte zu verwalten. Dies kann jedoch bei großen Projekten schnell kostspielig werden.

Um dieses Problem zu lösen, verfolgt Intlayer einen Ansatz, der Ihre Inhalte pro Komponente kapselt und Ihre Inhalte in der Nähe Ihrer Komponente hält, so wie wir es oft mit CSS (styled-components), Typen, Dokumentation (storybook) oder Unit-Tests (jest) tun.

.└── components    └── MyComponent        ├── index.content.ts        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx

import { t, type Dictionary } from "intlayer";

const componentExampleContent = {
  key: "component-example",
  content: {
    myTranslatedContent: t({
      en: "Hello World",
      es: "Hola Mundo",
      fr: "Bonjour le monde",
    }),
  },
} satisfies Dictionary;

export default componentExampleContent;

import { useIntlayer } from "react-intlayer";

export const ComponentExample = () => {
  const { myTranslatedContent } = useIntlayer("component-example");

  return <span>{myTranslatedContent}</span>;
};

Dieser Ansatz ermöglicht es Ihnen:

1. Die Entwicklungsgeschwindigkeit zu erhöhen

   • .content.{{ts|mjs|cjs|json}}-Dateien können mithilfe einer VSCode-Erweiterung erstellt werden
   • KI-Autovervollständigungswerkzeuge in Ihrer IDE (wie GitHub Copilot) können Ihnen bei der Deklaration Ihrer Inhalte helfen und so Copy-Paste reduzieren

2. Ihre Codebasis sauber zu halten

   • Komplexität reduzieren
   • Wartbarkeit erhöhen

3. Ihre Komponenten und die zugehörigen Inhalte einfacher zu duplizieren (Beispiel: Login-/Registrierungs-Komponenten usw.)

   • Durch Begrenzung des Risikos, dass sich die Inhalte anderer Komponenten ändern
   • Durch Kopieren/Einfügen Ihrer Inhalte von einer Anwendung in eine andere ohne externe Abhängigkeiten

4. Die Codebasis nicht mit ungenutzten Schlüsseln/Werten für ungenutzte Komponenten zu belasten

   • Wenn Sie eine Komponente nicht verwenden, importiert Intlayer die zugehörigen Inhalte nicht
   • Wenn Sie eine Komponente löschen, denken Sie leichter daran, die zugehörigen Inhalte zu entfernen, da sie sich im selben Ordner befinden

5. Die Denkbelastung für KI-Agenten bei der Deklaration Ihrer mehrsprachigen Inhalte zu reduzieren

   • Der KI-Agent muss nicht Ihre gesamte Codebasis scannen, um zu wissen, wo er Ihre Inhalte implementieren soll
   • Übersetzungen können einfach durch KI-Autovervollständigungswerkzeuge in Ihrer IDE (wie GitHub Copilot) durchgeführt werden

6. Die Ladeleistung zu optimieren

   • Wenn eine Komponente per Lazy-Loading geladen wird, werden die zugehörigen Inhalte gleichzeitig geladen

Zusätzliche Funktionen von Intlayer

Alle Tabellendaten anzeigen

Alle Tabellendaten anzeigen

Tabelle in einem Modal öffnen, um alle Daten übersichtlich anzuzeigen

Funktion	Beschreibung
	Cross-Framework-Unterstützung Intlayer ist kompatibel mit allen gängigen Frameworks und Bibliotheken, einschließlich Next.js, React, Vite, Vue.js, Nuxt, Preact, Express und mehr.
	JavaScript-gestütztes Inhaltsmanagement Nutzen Sie die Flexibilität von JavaScript, um Ihre Inhalte effizient zu definieren und zu verwalten. - Inhaltsdeklaration
	Compiler Der Intlayer-Compiler extrahiert automatisch Inhalte aus Ihren Komponenten und generiert die Wörterbuchdateien. - Compiler
	Inhaltsdeklarationsdatei pro Sprache Beschleunigen Sie Ihre Entwicklung, indem Sie Ihre Inhalte vor der automatischen Generierung einmal deklarieren. - Inhaltsdeklarationsdatei pro Sprache
	Typsichere Umgebung Nutzen Sie TypeScript, um sicherzustellen, dass Ihre Inhaltsdefinitionen und Ihr Code fehlerfrei sind, während Sie gleichzeitig von der IDE-Autovervollständigung profitieren. - TypeScript-Konfiguration
	Vereinfachtes Setup Schnell einsatzbereit mit minimaler Konfiguration. Passen Sie Einstellungen für Internationalisierung, Routing, KI, Build und Inhaltsverarbeitung mit Leichtigkeit an. - Erkunden Sie die Next.js-Integration
	Vereinfachtes Abrufen von Inhalten Sie müssen Ihre t-Funktion nicht für jedes Inhaltselement einzeln aufrufen. Rufen Sie alle Ihre Inhalte direkt mit einem einzigen Hook ab. - React-Integration
	Konsistente Implementierung für Server-Komponenten Perfekt geeignet für Next.js-Server-Komponenten: Nutzen Sie dieselbe Implementierung sowohl für Client- als auch für Server-Komponenten. Das Weiterreichen Ihrer t-Funktion durch die Server-Komponenten entfällt. - Server-Komponenten
	Organisierte Codebasis Halten Sie Ihre Codebasis organisierter: 1 Komponente = 1 Wörterbuch im selben Ordner. Übersetzungen in der Nähe der jeweiligen Komponenten verbessern die Wartbarkeit und Klarheit. - Wie Intlayer funktioniert
	Erweitertes Routing Volle Unterstützung von App-Routing, das sich nahtlos an komplexe Anwendungsstrukturen für Next.js, React, Vite, Vue.js usw. anpasst. - Erkunden Sie die Next.js-Integration
	Markdown-Unterstützung Importieren und interpretieren Sie lokale Dateien und Remote-Markdown für mehrsprachige Inhalte wie Datenschutzrichtlinien, Dokumentationen usw. Interpretieren Sie Markdown-Metadaten und machen Sie sie in Ihrem Code zugänglich. - Inhaltsdateien
	Kostenloser visueller Editor & CMS Ein kostenloser visueller Editor und ein CMS stehen für Texter zur Verfügung, sodass keine externe Lokalisierungsplattform erforderlich ist. Synchronisieren Sie Ihre Inhalte über Git oder lagern Sie sie ganz oder teilweise in das CMS aus. - Intlayer-Editor - Intlayer-CMS
	Tree-shakable Inhalte Tree-shakable Inhalte, die die Größe des finalen Bundles reduzieren. Lädt Inhalte pro Komponente und schließt ungenutzte Inhalte aus Ihrem Bundle aus. Unterstützt Lazy Loading zur Steigerung der Ladeeffizienz der App. - Optimierung des App-Builds
	Statisches Rendering Blockiert kein statisches Rendering. - Next.js-Integration
	KI-gestützte Übersetzung Übersetzen Sie Ihre Website mit nur einem Klick in 231 Sprachen mithilfe der fortschrittlichen KI-gestützten Übersetzungstools von Intlayer unter Verwendung Ihres eigenen KI-Anbieters/API-Schlüssels. - CI/CD-Integration - Intlayer-CLI - Automatisches Ausfüllen
	MCP-Server-Integration Bietet einen MCP-Server (Model Context Protocol) für die IDE-Automatisierung, der ein nahtloses Inhaltsmanagement und i18n-Workflows direkt in Ihrer Entwicklungsumgebung ermöglicht. - MCP-Server
	VSCode-Erweiterung Intlayer bietet eine VSCode-Erweiterung zur Verwaltung Ihrer Inhalte und Übersetzungen, zum Erstellen von Wörterbüchern, zum Übersetzen von Inhalten und mehr. - VSCode-Erweiterung
	Interoperabilität Ermöglicht die Interoperabilität mit react-i18next, next-i18next, next-intl und react-intl. - Intlayer und react-intl - Intlayer und next-intl - Intlayer und next-i18next
Fehlende Übersetzungen testen (CLI/CI)	✅ CLI: npx intlayer content test (CI-freundlicher Audit)

Vergleich von Intlayer mit anderen Lösungen

GitHub-Sterne

GitHub-Sterne sind ein starker Indikator für die Popularität eines Projekts, das Vertrauen der Community und seine langfristige Relevanz. Sie sind zwar kein direktes Maß für die technische Qualität, spiegeln jedoch wider, wie viele Entwickler das Projekt nützlich finden, seine Fortschritte verfolgen und es wahrscheinlich übernehmen werden. Zur Einschätzung des Projektwerts helfen Sterne dabei, das Interesse gegenüber Alternativen zu vergleichen, und bieten Einblicke in das Wachstum des Ökosystems.

Interoperabilität

intlayer kann Ihnen auch dabei helfen, Ihre Namespaces für react-intl, react-i18next, next-intl, next-i18next und vue-i18n zu verwalten.

Durch die Verwendung von intlayer können Sie Ihre Inhalte im Format Ihrer bevorzugten i18n-Bibliothek deklarieren, und Intlayer generiert Ihre Namespaces am Speicherort Ihrer Wahl (Beispiel: /messages/{{locale}}/{{namespace}}.json).