Intlayer Dokumentation

Willkommen in der offiziellen Intlayer-Dokumentation! Hier finden Sie alles, was Sie benötigen, um Intlayer für all Ihre Anforderungen an die Internationalisierung (i18n) zu integrieren, zu konfigurieren und zu meistern, unabhängig davon, ob Sie mit Next.js, React, Vite, Express oder einer anderen JavaScript-Umgebung arbeiten.

Einführung

Was ist Intlayer?

Intlayer ist eine Internationalisierungsbibliothek, die speziell für JavaScript-Entwickler entwickelt wurde. Sie ermöglicht die Deklaration Ihrer Inhalte überall in Ihrem Code. Sie konvertiert die Deklaration von mehrsprachigen Inhalten in strukturierte Wörterbücher, um sie einfach in Ihren Code zu integrieren. Durch die Verwendung von TypeScript macht Intlayer Ihre Entwicklung robuster und effizienter.

Intlayer bietet auch einen optionalen visuellen Editor, mit dem Sie Ihre Inhalte einfach bearbeiten und verwalten können. Dieser Editor ist besonders nützlich für Entwickler, die eine visuelle Schnittstelle für die Inhaltsverwaltung bevorzugen, oder für Teams, die Inhalte generieren, ohne sich um den Code kümmern zu müssen.

Anwendungsbeispiel

.└── Components    └── MyComponent        ├── index.content.ts        └── index.tsx

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

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

export default componentContent;

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

export const MyComponent: FC = () => {
  const { myTranslatedContent } = useIntlayer("component-key");

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

Warum Intlayer gegenüber Alternativen?

Im Vergleich zu gängigen Lösungen wie next-intl oder i18next ist Intlayer eine Lösung, die integrierte Optimierungen bietet, wie z.B.:

Hauptfunktionen

Intlayer bietet eine Vielzahl von Funktionen, die auf die Bedürfnisse der modernen Webentwicklung zugeschnitten sind. Im Folgenden finden Sie die wichtigsten Funktionen mit Links zur detaillierten Dokumentation für jede:

• Internationalisierungsunterstützung: Verbessern Sie die globale Reichweite Ihrer Anwendung mit integrierter Unterstützung für die Internationalisierung.
• Visueller Editor: Verbessern Sie Ihren Entwicklungs-Workflow mit Editor-Plugins, die für Intlayer entwickelt wurden. Lesen Sie den Visueller Editor Guide.
• Konfigurationsflexibilität: Passen Sie Ihr Setup mit umfangreichen Konfigurationsoptionen an, die im Konfigurationshandbuch detailliert beschrieben sind.
• Erweiterte CLI-Tools: Verwalten Sie Ihre Projekte effizient mit der Befehlszeilenschnittstelle von Intlayer. Entdecken Sie die Möglichkeiten in der CLI-Tools-Dokumentation.

Kernkonzepte

Wörterbuch

Organisieren Sie Ihre mehrsprachigen Inhalte nah an Ihrem Code, um alles konsistent und wartbar zu halten.

• Erste Schritte
  Erlernen Sie die Grundlagen der Deklaration Ihrer Inhalte in Intlayer.

• Übersetzung
  Verstehen Sie, wie Übersetzungen generiert, gespeichert und in Ihrer Anwendung verwendet werden.

• Aufzählung
  Verwalten Sie einfach wiederkehrende oder feste Datensätze in verschiedenen Sprachen.

• Bedingung
  Erfahren Sie, wie Sie bedingte Logik in Intlayer verwenden, um dynamische Inhalte zu erstellen.

• Einfügen Entdecken Sie, wie Sie Werte mithilfe von Einfügeplatzhaltern in eine Zeichenfolge einfügen.

• Funktionsabruf
  Sehen Sie, wie Sie Inhalte mit benutzerdefinierter Logik dynamisch abrufen, um sie an den Workflow Ihres Projekts anzupassen.

• Markdown
  Erfahren Sie, wie Sie Markdown in Intlayer verwenden, um reichhaltige Inhalte zu erstellen.

• Datei-Einbettungen
  Entdecken Sie, wie Sie externe Dateien in Intlayer einbetten können, um sie im Inhalts-Editor zu verwenden.

• Verschachtelung
  Verstehen Sie, wie Sie Inhalte in Intlayer verschachteln, um komplexe Strukturen zu erstellen.

Umgebungen & Integrationen

Wir haben Intlayer mit Blick auf Flexibilität entwickelt und bieten eine nahtlose Integration in beliebte Frameworks und Build-Tools:

• Intlayer mit Next.js 16
• Intlayer mit Next.js 15
• Intlayer mit Next.js 14 (App Router)
• Intlayer mit Next.js Page Router
• Intlayer mit React CRA
• Intlayer mit Vite + React
• Intlayer mit React Router v7
• Intlayer mit Tanstack Start
• Intlayer mit React Native und Expo
• Intlayer mit Lynx und React
• Intlayer mit Vite + Preact
• Intlayer mit Vite + Vue
• Intlayer mit Nuxt
• Intlayer mit Vite + Svelte
• Intlayer mit SvelteKit
• Intlayer mit Express
• Intlayer mit NestJS
• Intlayer mit Hono
• Intlayer mit Angular

Jeder Integrationsleitfaden enthält Best Practices für die Verwendung der Funktionen von Intlayer, wie z. B. Serverseitiges Rendering, Dynamisches Routing oder Clientseitiges Rendering, damit Sie eine schnelle, SEO-freundliche und hochgradig skalierbare Anwendung aufrechterhalten können.

Beitrag & Feedback

Wir schätzen die Kraft von Open-Source und Community-gesteuerter Entwicklung. Wenn Sie Verbesserungen vorschlagen, einen neuen Leitfaden hinzufügen oder Probleme in unseren Dokumenten beheben möchten, können Sie gerne einen Pull Request einreichen oder ein Issue in unserem GitHub-Repository öffnen.

Bereit, Ihre Anwendung schneller und effizienter zu übersetzen? Tauchen Sie in unsere Dokumentation ein, um noch heute mit Intlayer zu beginnen. Erleben Sie einen robusten, optimierten Ansatz zur Internationalisierung, der Ihre Inhalte organisiert und Ihr Team produktiver macht.