Skip to content
 

Der Weg zu v2: Umstellung auf React/NextJS und Implementierung von i18n

Erfahren Sie mehr über unseren Weg vom reinen JavaScript zu React/NextJS und der Implementierung der Internationalisierung (i18n) bei der Entwicklung der neuen Version unserer Dienstleistungen bei Gentlent.

Tom Kleinvon Tom Klein · 3 min Lesezeit
Erfahren Sie mehr über unseren Weg vom reinen JavaScript zu React/NextJS und der Implementierung der Internationalisierung (i18n) bei der Entwicklung der neuen Version unserer Dienstleistungen bei Gentlent.
Erfahren Sie mehr über unseren Weg vom reinen JavaScript zu React/NextJS und der Implementierung der Internationalisierung (i18n) bei der Entwicklung der neuen Version unserer Dienstleistungen bei Gentlent.
 


Einführung

Bei Gentlent sind wir ständig bestrebt, unsere Software-as-a-Service- und Webentwicklungsfähigkeiten zu verbessern. Wir freuen uns, unsere neue Blogreihe "Road to v2" zu starten, in der wir die Entwicklungsreise zur Veröffentlichung der neuesten Version unserer Dienste teilen. Diese neue Version bringt eine Vielzahl aufregender Funktionen und Neugestaltungen, während sie ein vertrautes Aussehen und Gefühl beibehält. In diesem ersten Teil der Serie werden wir in den Prozess des Wechsels von Vanilla JavaScript zu React/NextJS eintauchen und die Implementierung der Internationalisierung (i18n) zur Unterstützung mehrerer Sprachen untersuchen.


Warum der Wechsel zu React/NextJS?

Als unsere Dienste in ihrer Komplexität wuchsen, erkannten wir die Notwendigkeit eines robusteren und effizienteren Frameworks für den Aufbau skalierbarer und wartbarer Anwendungen. Nach sorgfältiger Überlegung entschieden wir uns für React, eine beliebte JavaScript-Bibliothek zum Aufbau von Benutzeroberflächen, und dessen Begleitframework NextJS für serverseitiges Rendering und Routing.

Die Entscheidung, React/NextJS zu übernehmen, brachte mehrere Vorteile für unseren Entwicklungsprozess:

  1. Komponentenbasierte Architektur: Reacts komponentenbasierter Ansatz ermöglicht es uns, komplexe Benutzeroberflächen in wiederverwendbare und verwaltbare Teile zu zerlegen. Diese modulare Struktur verbessert die Wartbarkeit des Codes und fördert die Wiederverwendbarkeit des Codes in verschiedenen Teilen unserer Anwendung.
  2. Effizientes Rendering: NextJS bietet serverseitiges Rendering (SSR), das es uns ermöglicht, Seiten auf dem Server vorab zu rendern, was zu schnelleren anfänglichen Seitenladezeiten und einer verbesserten Leistung führt. Dies gewährleistet ein nahtloses Benutzererlebnis, insbesondere für Anwendungen mit dynamischem Inhalt.
  3. Verbesserte Entwicklererfahrung: React/NextJS bietet ein umfangreiches Ökosystem von Bibliotheken, Tools und Community-Support. Dieses Ökosystem befähigt unser Entwicklungsteam, produktiver zu sein, qualitativ hochwertigen Code zu liefern und Best Practices in der Branche zu nutzen.


Implementierung der Internationalisierung (i18n)

Um unsere globale Benutzerbasis zu bedienen, erkannten wir die Wichtigkeit, mehrsprachige Unterstützung in unserer Anwendung bereitzustellen. Die Implementierung der Internationalisierung (i18n) war ein entscheidender Schritt, um unsere Dienste für Menschen auf der ganzen Welt zugänglich und benutzerfreundlich zu machen.


Benutzerdefinierte i18n-Implementierung

Um die i18n-Funktionalität zu erreichen, erstellte unser Entwicklungsteam eine benutzerdefinierte Implementierung, die auf die spezifischen Bedürfnisse unserer Dienste bei Gentlent zugeschnitten ist. Diese benutzerdefinierte i18n-Lösung ermöglicht es uns, Übersetzungen zu verwalten und mehrere Sprachen nahtlos zu unterstützen.


Einrichten von Englisch und Deutsch

Mit unserer benutzerdefinierten i18n-Lösung begannen wir damit, die Unterstützung für Englisch (en) und Deutsch (de) in unserer Anwendung zu aktivieren. Wir erstellten separate Übersetzungsdateien für jede Sprache, die alle im gesamten Anwendung verwendeten Textfragmente kapseln.


Laden von Sprachressourcen

Unsere benutzerdefinierte i18n-Implementierung bietet einen einfachen Mechanismus zum Laden von Sprachressourcen basierend auf der Benutzerpräferenz. Wenn ein Benutzer eine bestimmte Sprache auswählt, laden wir dynamisch die entsprechende Übersetzungsdatei und machen sie in der gesamten Anwendung verfügbar.


Wechsel zwischen Sprachen

Um Benutzer nahtlos zwischen Sprachen wechseln zu lassen, fügten wir der Benutzeroberfläche eine Sprachwechsel-Funktionalität hinzu. Wenn ein Benutzer eine andere Sprache auswählt, aktualisiert die Anwendung dynamisch den Inhalt, indem die entsprechende Übersetzungsdatei abgerufen und die Seite mit der neuen Sprache aktualisiert wird. Sie finden es unten auf den meisten Seiten.


Erweiterbarkeit: Hinzufügen neuer Sprachen

Unsere benutzerdefinierte i18n-Implementierung wurde mit Blick auf Erweiterbarkeit entwickelt, sodass wir neue Sprachen hinzufügen können, wenn unsere Benutzerbasis wächst. Das Hinzufügen einer neuen Sprache ist ein unkomplizierter Prozess, der das Erstellen einer neuen Übersetzungsdatei für die gewünschte Sprache und deren Integration in die Anwendung umfasst.


Fazit

In diesem ersten Teil unserer Serie "Road to v2" haben wir die Reise des Wechsels von Vanilla JavaScript zu React/NextJS und die Implementierung der Internationalisierung (i18n) mit unserer benutzerdefinierten Lösung in der neuen Version unserer Dienste bei Gentlent untersucht. Durch die Nutzung von React/NextJS haben wir die Vorteile einer komponentenbasierten Architektur, eines effizienten Renderings und einer verbesserten Entwicklererfahrung gewonnen. Darüber hinaus stellt unsere benutzerdefinierte i18n-Implementierung sicher, dass unsere Dienste für Menschen auf der ganzen Welt zugänglich und benutzerfreundlich sind.

Bleiben Sie dran für den nächsten Teil unserer Serie, in dem wir uns mit den aufregenden neuen Funktionen und Neugestaltungen befassen, an denen unser Team für v2 gearbeitet hat.

Wenn Sie Fragen oder Feedback haben, zögern Sie bitte nicht, uns zu kontaktieren. Wir schätzen Ihre kontinuierliche Unterstützung, während wir bestrebt sind, unseren Benutzern das bestmögliche Erlebnis zu bieten.


Artikel teilen


Tom Klein
Founder & CEO
Gentlent UG (haftungsbeschränkt)

Gentlent
Kundendienst
support@gentlent.com



Aktuelle Artikel

Sie wollen mehr erfahren?
Kontaktieren Sie uns noch heute.

 
GentlentEine offizielle Gentlent Website. Offizielle Gentlent Websites sind immer von unserer Website gentlent.com verlinkt oder enthalten ein erweitertes validiertes Zertifikat.
Skyline Dusseldorf