i18n für jede Komponente

KI-gestützte Übersetzung. Visueller Editor. Mehrsprachiges CMS.

Docs • Next.js • React + Vite • CMS • Discord

Was ist Intlayer?

Die meisten i18n-Bibliotheken sind entweder zu komplex, zu starr oder nicht für moderne Frameworks entwickelt.

Intlayer ist eine moderne i18n-Lösung für Web- und mobile Apps.
Es ist framework-unabhängig, KI-gestützt und enthält ein kostenloses CMS & einen visuellen Editor.

Mit lokalspezifischen Inhaltsdateien, TypeScript-Autovervollständigung, Tree-shakable Wörterbüchern und CI/CD-Integration macht Intlayer die Internationalisierung schneller, sauberer und intelligenter.

Hauptvorteile von Intlayer:

Merkmal	Beschreibung
	Framework-übergreifende Unterstützung Intlayer ist mit allen gängigen Frameworks und Bibliotheken kompatibel, einschließlich Next.js, React, Vite, Vue.js, Nuxt, Preact, Express und mehr.
	JavaScript-gestütztes Content-Management Nutzen Sie die Flexibilität von JavaScript, um Ihre Inhalte effizient zu definieren und zu verwalten. - Inhaltsdeklaration
	Lokalspezifische Inhaltsdeklarationsdatei Beschleunigen Sie Ihre Entwicklung, indem Sie Ihren Inhalt einmal vor der automatischen Generierung deklarieren. - Lokalspezifische Inhaltsdeklarationsdatei
	Compiler Der Intlayer-Compiler extrahiert automatisch den Inhalt aus den Komponenten und generiert die Wörterbuchdateien. - Compiler
	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 Starten Sie schnell mit minimaler Konfiguration. Passen Sie Einstellungen für Internationalisierung, Routing, KI, Build und Inhaltsverwaltung mit Leichtigkeit an. - Next.js-Integration erkunden
	Vereinfachter Inhaltsabruf Es ist nicht nötig, Ihre t-Funktion für jedes Inhaltselement aufzurufen. Rufen Sie Ihren gesamten Inhalt direkt mit einem einzigen Hook ab. - React-Integration
	Konsistente Implementierung von Server-Komponenten Perfekt geeignet für Next.js-Server-Komponenten. Verwenden Sie dieselbe Implementierung sowohl für Client- als auch für Server-Komponenten. Die t-Funktion muss nicht an jede Server-Komponente übergeben werden. - Server-Komponenten
	Organisierte Codebasis Halten Sie Ihre Codebasis organisierter: 1 Komponente = 1 Wörterbuch im selben Ordner. Übersetzungen in der Nähe ihrer jeweiligen Komponenten verbessern die Wartbarkeit und Klarheit. - Wie Intlayer funktioniert
	Verbessertes Routing Volle Unterstützung für App-Routing, das sich nahtlos an komplexe Anwendungsstrukturen anpasst, für Next.js, React, Vite, Vue.js usw. - Next.js-Integration erkunden
	Markdown-Unterstützung Importier 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 Content-Autoren zur Verfügung, sodass keine Lokalisierungsplattform erforderlich ist. Halten Sie Ihren Inhalt mit Git synchron oder externalisieren Sie ihn ganz oder teilweise mit dem CMS. - Intlayer Editor - Intlayer CMS
	Tree-shakable Inhalt Tree-shakable Inhalt, der die Größe des endgültigen Bundles reduziert. Lädt Inhalt pro Komponente und schließt ungenutzten Inhalt aus Ihrem Bundle aus. Unterstützt Lazy Loading, um die Ladeeffizienz der App zu verbessern. - App-Build-Optimierung
	Statisches Rendering Blockiert statisches Rendering nicht. - Next.js-Integration
	KI-gestützte Übersetzung Verwandeln Sie Ihre Website mit nur einem Klick in 231 Sprachen mit den fortschrittlichen KI-gestützten Übersetzungswerkzeugen von Intlayer unter Verwendung Ihres eigenen KI-Anbieters / API-Schlüssels. - CI/CD-Integration - Intlayer CLI - Auto-Fill
	MCP-Server-Integration Bietet einen MCP-Server (Model Context Protocol) für die IDE-Automatisierung, der nahtloses Content-Management und i18n-Workflows direkt in Ihrer Entwicklungsumgebung ermöglicht. - MCP-Server
	VSCode-Erweiterung Intlayer bietet eine VSCode-Erweiterung, die Ihnen hilft, Ihre Inhalte und Übersetzungen zu verwalten, Ihre Wörterbücher zu erstellen, Ihre Inhalte zu übersetzen und mehr. - VSCode-Erweiterung
	Interoperabilität Ermöglicht Interoperabilität mit react-i18next, next-i18next, next-intl, react-intl, vue-i18n. - Intlayer und react-intl - Intlayer und next-intl - Intlayer und next-i18next - Intlayer und vue-i18n - Intlayer Compat-Adapter
	Leistung & Benchmark Verwendet fortschrittliches Tree-Shaking und dynamisches Laden, um die Leistung zu steigern und die Lösung so schlank wie möglich zu halten. - Leistung & Benchmark

📦 Installation

Beginnen Sie noch heute Ihre Reise mit Intlayer und erleben Sie einen reibungsloseren, leistungsstärkeren Ansatz zur Internationalisierung.

npm install intlayer react-intlayer

yarn add intlayer react-intlayer

pnpm add intlayer react-intlayer

bun add intlayer react-intlayer

⚡ Schnellstart (Next.js)

// intlayer.config.ts
import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

// app/home.content.ts
import { t, type Dictionary } from "intlayer";

const content = {
  key: "home",
  content: {
    title: t({
      en: "Home",
      fr: "Accueil",
      es: "Inicio",
    }),
  },
} satisfies Dictionary;

export default content;

// app/page.tsx
import { useIntlayer } from "react-intlayer";

const HomePage = () => {
  const { title } = useIntlayer("home");

  return <h1>{title}</h1>;
};

Zum vollständigen Leitfaden →

🎥 Live-Tutorial auf YouTube

Inhaltsverzeichnis

Erkunden Sie unsere umfassende Dokumentation, um mit Intlayer zu beginnen und zu erfahren, wie Sie es in Ihre Projekte integrieren.

📘 Erste Schritte

• Warum Intlayer?
• Einführung

⚙️ Konzept

• Wie Intlayer funktioniert
• Konfiguration
• Intlayer CLI
• Compiler
• Intlayer Editor
• Intlayer CMS
• Wörterbuch
  • Lokalspezifische Inhaltsdeklarationsdatei
  • Übersetzung
  • Aufzählung
  • Bedingung
  • Verschachtelung
  • Markdown
  • Funktionsabruf
  • Einfügung
  • Datei

🌐 Umgebung

• Intlayer mit Next.js 16
  • Next.js 15
  • Next.js 14 (App Router)
  • Next.js Page Router
  • Next.js mit Compiler
• React CRA
• Vite + React
• Vite + React mit Compiler
• React-router-v7
• Remix 3
• Tanstack start
  • Solid
• Astro
  • React
  • Vue
  • Svelte
  • Solid
  • Lit
• React Native
• Vite + Svelte
• SvelteKit
• Vite + Preact
• Vite + Vue
• Vite + Nuxt
• Vite + Solid
• Solid Start
• Angular
• Backend
  • Express
  • NestJS
  • Fastify
  • AdonisJS
  • Hono
  • Elysia

📊 Benchmark

• Next.js
• TanStack Start
• Vue
• Solid
• Svelte

📰 Blog

• Was ist i18n
• i18n und SEO
• Intlayer und i18next
• Intlayer und react-intl
• Intlayer und next-intl

Mehrsprachiges Content-Management-System

Mehr als eine i18n-Bibliothek: Intlayer ist ein vollständiges mehrsprachiges Content-Management-System. Ein vollständiges CMS steht kostenlos unter app.intlayer.org zur Verfügung.

Intlayer verbindet Entwickler, Texter und KI-Agenten in einem einzigen Workflow zur mühelosen Erstellung und Pflege mehrsprachiger Websites. Intlayer ersetzt den folgenden Stack in einer einzigen Lösung:

• i18n-Lösungen (z. B. i18next, next-intl, vue-i18n)
• TMSs (Translation Management Systems) (z. B. Crowdin, Phrase, Lokalise)
• Headless CMSs (z. B. Contentful, Strapi, Sanity)

🌐 Readme in anderen Sprachen

English • 简体中文 • Русский • 日本語 • Français • 한국어 • Español • Deutsch • العربية • Italiano • English (UK) • Português • हिन्दी • Türkçe

🤝 Community

Intlayer wird mit und für die Community entwickelt und wir würden uns über Ihr Feedback freuen!

• Haben Sie einen Vorschlag? Eröffnen Sie ein Issue
• Einen Fehler oder eine Verbesserung gefunden? Senden Sie einen PR
• Brauchen Sie Hilfe oder möchten Sie sich vernetzen? Treten Sie unserem Discord bei

Sie können uns auch folgen auf:

Beitrag

Detailliertere Richtlinien zur Mitarbeit an diesem Projekt finden Sie in der Datei CONTRIBUTING.md. Sie enthält wichtige Informationen zu unserem Entwicklungsprozess, zu Konventionen für Commit-Nachrichten und zu Release-Verfahren. Ihre Beiträge sind für uns wertvoll und wir schätzen Ihre Bemühungen, dieses Projekt zu verbessern!

Tragen Sie bei auf GitHub, GitLab oder Bitbucket.

Vielen Dank für die Unterstützung

Wenn Ihnen Intlayer gefällt, geben Sie uns einen ⭐ auf GitHub. Es hilft anderen, das Projekt zu entdecken! Erfahren Sie, warum GitHub-Sterne wichtig sind.