Next.js Internationalisierung
next-intl, Locale-Routing, Übersetzungen, Datums-/Zeitformatierung, RTL-Unterstützung, dynamisches Locale-Wechseln
1Was ist die Hauptaufgabe der middleware.ts-Datei in einer Next.js-Anwendung mit next-intl?
Was ist die Hauptaufgabe der middleware.ts-Datei in einer Next.js-Anwendung mit next-intl?
Antwort
Die next-intl-Middleware erkennt automatisch die Locale des Benutzers (über Accept-Language-Header, Cookies oder URL) und leitet zur entsprechenden URL mit dem Locale-Präfix weiter. Sie wird vor jeder Anfrage ausgeführt und verwaltet die Locale-Aushandlung ohne zusätzlichen Code in Komponenten. Sie ist der erforderliche Einstiegspunkt zur Aktivierung des i18n-Routings im Next.js App Router.
2Wo sollten Übersetzungsdateien in next-intl für eine optimale Projektstruktur abgelegt werden?
Wo sollten Übersetzungsdateien in next-intl für eine optimale Projektstruktur abgelegt werden?
Antwort
Übersetzungsdateien werden in messages/[locale].json im Projektstamm abgelegt (z.B. messages/fr.json, messages/en.json). Diese Konvention erleichtert die Erkennung von Übersetzungen und ermöglicht next-intl das automatische Laden über die i18n-Konfiguration. Einige Projekte verwenden auch messages/[locale]/ mit separaten Dateien pro Namespace für eine bessere Organisation.
3Was ist der Hauptunterschied zwischen useTranslations und getTranslations in next-intl?
Was ist der Hauptunterschied zwischen useTranslations und getTranslations in next-intl?
Antwort
useTranslations ist ein synchroner React-Hook für Client Components, während getTranslations eine async-Funktion für Server Components ist. getTranslations ermöglicht das Abrufen von Übersetzungen serverseitig, ohne JavaScript an den Client zu senden, was die Performance verbessert. useTranslations ist für interaktive Komponenten erforderlich, die die use client-Direktive benötigen.
Wie konfiguriert man unterstützte Locales in next-intl?
Was ist die Syntax zur Verwendung von Variablen in einer next-intl-Übersetzung?
+17 Interview-Fragen
Weitere React / Next.js-Interviewthemen
JavaScript-Grundlagen
React-Grundlagen
React Hooks
Komponentenlebenszyklus
React Router
Zustandsverwaltung mit Context
Formulare & Controlled Components
Datenabruf & API
React Query (TanStack Query)
Styling & CSS-in-JS
Next.js Grundlagen
TypeScript mit React
Next.js Data Fetching
Next.js Server Actions
Routing & Navigation in Next.js
Next.js API Routes
Next.js Metadata & SEO
Next.js Middleware & Auth
React Testing
Zustand State Management
React Performance-Optimierung
Error Boundaries & Error Handling
Advanced React Patterns
Erweiterte Next.js-Funktionen
Next.js Deployment & Produktion
Architecture & Design Patterns
React Server Components
React Sicherheit & Best Practices
Meistere React / Next.js für dein nächstes Interview
Zugang zu allen Fragen, Flashcards, technischen Tests, Code-Review-Übungen und Interview-Simulatoren.
Kostenlos starten