@intlayer/docs 5.5.10 → 5.5.11

package/frequent_questions/ar/translated_path_url.md

@@ -0,0 +1,56 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: هل يمكنني ترجمة مسار عنوان URL؟
+description: تعلّم كيفية ترجمة مسار عنوان URL.
+keywords:
+  - مصفوفة
+  - محتوى
+  - إعلان
+  - intlayer
+  - وسيط
+  - وكيل
+  - إعادة كتابة
+  - بادئة
+  - لغة
+  - عنوان URL
+slugs:
+  - doc
+  - faq
+  - translated-path-url
+---
+
+# هل من الممكن ترجمة عنوان URL كما يلي:
+
+```bash
+en -> /product (بدون بادئة) أو /en/product (مع بادئة)
+fr -> /fr/produit
+es -> /es/producto
+```
+
+لسوء الحظ، لا يسمح Intlayer بترجمة عناوين URL كما هو محدد. لتحقيق ذلك، يجب عليك استخدام وسيط خاص بك أو وكيل لإعادة كتابة عناوين URL.
+
+ولكن يمكنك استخدام دالة `getMultilingualUrl` لإدخال البادئة في عنوان URL للغة معينة.
+
+```ts
+import { getMultilingualUrl, Locales } from "intlayer";
+
+const url = getMultilingualUrl("/product");
+
+/**
+ * en -> /product (بدون بادئة) أو /en/product (مع بادئة)
+ * fr -> /fr/product
+ * es -> /es/product
+ */
+console.log(url);
+```
+
+أو `getLocalizedUrl`
+
+```ts
+import { getLocalizedUrl, Locales } from "intlayer";
+
+const url = getLocalizedUrl("/product", Locales.FRENCH);
+
+console.log(url); // /fr/product
+```

package/frequent_questions/ar/unknown_command.md

@@ -0,0 +1,98 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: أمر غير معروف
+description: تعلّم كيفية إصلاح خطأ الأمر غير المعروف.
+keywords:
+  - غير معروف
+  - أمر
+  - خطأ
+  - intlayer
+  - fill
+  - build
+  - verbose
+  - الطرفية
+  - إعادة تشغيل
+  - محلي
+slugs:
+  - doc
+  - faq
+  - أمر-غير-معروف
+---
+
+# خطأ: أمر غير معروف fill / build / إلخ
+
+إذا أعطى الأمر `npx intlayer fill --verbose`:
+
+```
+error: unknown command 'fill'
+```
+
+ولكنك متأكد أن الأمر `fill` _يجب أن_ يكون موجودًا، فإليك الخطوات لحل المشكلة:
+
+## 1. **تأكد من أنك تستخدم أحدث إصدار**
+
+شغّل:
+
+```bash
+npx intlayer --version                  # إصدار intlayer الحالي للبيئة المحلية
+npx intlayer@latest --version           # أحدث إصدار متوفر من intlayer
+```
+
+هذا يجبر `npx` على جلب أحدث إصدار. ثم حاول مرة أخرى:
+
+```bash
+npx intlayer@latest build --verbose
+```
+
+## 2. **تحقق مما إذا كان الأمر مسجلاً**
+
+يمكنك التحقق باستخدام:
+
+```bash
+npx intlayer --help                     # عرض المعلومات المتعلقة بالأوامر
+```
+
+تحقق مما إذا كان الأمر يظهر في قائمة الأوامر.
+
+اذهب إلى المستودع، وتأكد من أن الأمر الخاص بك مُصدر ومسجل في نقطة دخول CLI. يستخدم Intlayer إطار العمل `commander`.
+
+الكود المتعلق بـ CLI:
+https://github.com/aymericzip/intlayer/blob/main/packages/%40intlayer/cli/src/cli.ts
+
+## 4. **أعد تشغيل الطرفية**
+
+في بعض الأحيان، يحتاج الطرفية إلى إعادة تشغيل للتعرف على الأوامر الجديدة.
+
+## 5. **إذا كنت تطور `intlayer`، أعد بناءه واربطه**
+
+إذا كنت تطور `intlayer` محليًا:
+
+```bash
+# في مجلد intlayer
+npm install
+npm run build
+npm link
+```
+
+ثم في طرفية أخرى:
+
+```bash
+intlayer fill --verbose
+```
+
+هذا يستخدم النسخة المحلية التي تعمل عليها.
+
+## 6. **مسح ذاكرة التخزين المؤقت لـ npx (إذا كنت عالقًا مع نسخة قديمة)**
+
+```bash
+npx clear-npx-cache
+```
+
+أو احذف حزم intlayer المخزنة مؤقتًا يدويًا:
+
+```bash
+rm -rf ~/.npm/_npx
+```
+
+تحقق من المكافئ إذا كنت تستخدم pnpm أو yarn أو bun أو مدير حزم آخر

package/frequent_questions/de/SSR_Next_no_[locale].md

@@ -0,0 +1,105 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Ist es möglich, Intlayer mit Next.js ohne `[locale]` im Seitenpfad zu verwenden?
+description: Erfahren Sie, wie Sie Intlayer mit Next.js ohne `[locale]` im Seitenpfad verwenden können.
+keywords:
+  - locale
+  - pfad
+  - intlayer
+  - next.js
+  - vite
+  - framework
+  - middleware
+  - konfiguration
+  - prefixDefault
+  - noPrefix
+slugs:
+  - doc
+  - faq
+  - ssr-next-no-[locale]
+---
+
+# Ist es möglich, Intlayer mit Next.js ohne `[locale]` im Seitenpfad zu verwenden?
+
+Ja, es ist möglich, Intlayer mit Next.js ohne `[locale]` im Seitenpfad zu verwenden. Es wird jedoch nicht empfohlen, da die Aufteilung Ihrer Seite es ermöglicht, mehr Schlüsselwörter in Suchmaschinen auszulösen. Ihr SSR könnte ebenfalls beeinträchtigt werden.
+
+Wenn Sie dies tun möchten, folgen Sie den gleichen Schritten wie im Leitfaden [Intlayer mit Next.js](https://intlayer.org/doc/environment/nextjs) beschrieben,
+
+- kein `src/middleware.ts`
+- kein `generateStaticParams`
+
+```tsx fileName="src/app/layout.tsx"
+import type { FC, PropsWithChildren } from "react";
+
+const LocaleLayout: FC<PropsWithChildren> = ({ children }) => (
+  <html lang={undefined} dir={undefined}>
+    <body className={inter.className}>{children}</body>
+  </html>
+);
+
+export default LocaleLayout;
+```
+
+```tsx fileName="src/app/page.tsx"
+import type { FC } from "react";
+import { ClientComponentExample } from "@components/ClientComponentExample";
+import { ServerComponentExample } from "@components/ServerComponentExample";
+import { PageContent } from "@components/pageContent";
+import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";
+import { IntlayerServerProvider } from "next-intlayer/server";
+
+const Page: FC = () => {
+  return (
+    <IntlayerServerProvider>
+      <PageContent />
+      <ServerComponentExample />
+
+      <IntlayerClientProvider>
+        <ClientComponentExample />
+      </IntlayerClientProvider>
+    </IntlayerServerProvider>
+  );
+};
+
+export default Page;
+```
+
+```tsx fileName="src/component/pageContent.ts"
+"use client";
+
+import { type FC } from "react";
+import { useIntlayer } from "next-intlayer";
+import { useHTMLLanguage } from "@hooks/htmlTextDir";
+
+const PageContent: FC = () => {
+  useHTMLLanguage();
+  const content = useIntlayer("page");
+
+  return (
+    <>
+      <p>{content.getStarted.main}</p>
+      <code>{content.getStarted.pageLink}</code>
+    </>
+  );
+};
+```
+
+```tsx fileName="src/hooks/htmlTextDir.ts"
+"use client";
+
+import { useEffect } from "react";
+import { getHTMLTextDir } from "intlayer";
+import { useLocale } from "next-intlayer";
+
+export const useHTMLLanguage = () => {
+  const { locale } = useLocale();
+
+  useEffect(() => {
+    if (!document) return;
+
+    document.documentElement.lang = locale; // Setzt die Sprache des HTML-Dokuments
+    document.documentElement.dir = getHTMLTextDir(locale); // Setzt die Schreibrichtung basierend auf der Sprache
+  }, [locale]);
+};
+```

package/frequent_questions/de/array_as_content_declaration.md

@@ -0,0 +1,72 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Kann ich ein Array als Inhaltsdeklaration verwenden?
+description: Erfahren Sie, wie Sie ein Array als Inhaltsdeklaration verwenden können.
+keywords:
+  - array
+  - inhalt
+  - deklaration
+  - intlayer
+slugs:
+  - doc
+  - faq
+  - array-als-inhaltsdeklaration
+---
+
+# Kann ich ein Array als Inhaltsdeklaration verwenden?
+
+Ja, Sie können ein Array als Inhaltsdeklaration verwenden.
+
+```ts
+import { t, type Dictionary } from "intlayer";
+
+const exampleContent = {
+  key: "example",
+  content: {
+    test: t({
+      en: ["Test", "Test2", "Test3"],
+      fr: ["Test", "Test2", "Test3"],
+      es: ["Test", "Test2", "Test3"],
+    }),
+  },
+};
+
+export default exampleContent;
+```
+
+Dann können Sie den Inhalt so verwenden:
+
+```tsx
+import { useIntlayer } from "react-intlayer";
+
+const Example = () => {
+  const content = useIntlayer("example");
+
+  return (
+    <div>
+      {content.test.map((item) => (
+        <div key={item.value}>{item}</div>
+      ))}
+    </div>
+  );
+};
+```
+
+```vue
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const content = useIntlayer("example");
+</script>
+
+<template>
+  <div>
+    <div v-for="item in content.test" :key="item.value">
+      {{ item }}
+    </div>
+  </div>
+</template>
+```
+
+`.value` ermöglicht es Ihnen, den Wert des Inhalts zu erhalten, ohne dass er von einem `IntlayerNode` umschlossen ist.

package/frequent_questions/de/build_dictionaries.md

@@ -0,0 +1,59 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Wie baut man Wörterbücher?
+description: Lernen Sie, wie man Wörterbücher erstellt.
+keywords:
+  - bauen
+  - wörterbücher
+  - intlayer
+  - befehl
+  - beobachten
+  - vscode
+  - plugin
+  - framework
+  - next.js
+  - vite
+slugs:
+  - doc
+  - faq
+  - wörterbücher-erstellen
+---
+
+# Wörterbücher erstellen
+
+## Wie man Wörterbücher erstellt
+
+Intlayer stellt ein Kommandozeilen-Tool zur Verfügung, um Wörterbücher zu erstellen.
+
+```bash
+npx intlayer dictionaries build
+```
+
+Dieser Befehl:
+
+- Durchsucht alle Inhaltsdeklarationsdateien (`.content.{ts,tsx,js,mjs,cjs,json,...}`) in Ihrem Projekt.
+- Generiert Wörterbücher und speichert sie im Ordner `.intlayer/dictionary`.
+
+### Beobachtungsmodus
+
+Wenn Sie Wörterbücher automatisch aktualisieren möchten, sobald Änderungen an Inhaltsdeklarationsdateien vorgenommen werden, führen Sie den folgenden Befehl aus:
+
+```bash
+npx intlayer dictionaries build --watch
+```
+
+In diesem Modus durchsucht und erstellt Intlayer Wörterbücher, sobald Änderungen an Inhaltsdeklarationsdateien vorgenommen werden, und aktualisiert automatisch den Ordner `.intlayer/dictionary`.
+
+### Verwendung der VSCode-Erweiterung
+
+Sie können auch die [Intlayer VSCode-Erweiterung](https://github.com/aymericzip/intlayer/tree/main/docs/de/vs_code_extension.md) verwenden, um Ihre Intlayer-Erfahrung in VSCode zu verbessern.
+
+### Verwendung des Plugins für Ihr bevorzugtes Anwendungsframework
+
+Wenn Sie ein Framework wie Next.js (Webpack / Turbopack), Vite oder React Native, Lynx usw. verwenden, stellt Intlayer ein Plugin bereit, mit dem Sie Intlayer in Ihre Anwendung integrieren können.
+
+Intlayer erstellt die Wörterbücher vor dem Build Ihrer Anwendung.
+Ebenso überwacht Intlayer im Entwicklungsmodus Änderungen an Ihren Inhaltsdeklarationsdateien und erstellt die Wörterbücher automatisch neu.
+
+Lesen Sie daher die spezifische Dokumentation Ihres Frameworks, um zu erfahren, wie Sie das Plugin integrieren können.

package/frequent_questions/de/customized_locale_list.md

@@ -0,0 +1,65 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Wie kann man die Liste der Sprachen anpassen?
+description: Erfahren Sie, wie Sie die Liste der Sprachen anpassen können.
+keywords:
+  - locales
+  - liste
+  - intlayer
+  - konfiguration
+  - availableLocales
+  - defaultLocale
+  - useLocale
+  - hook
+  - sprache
+  - liste
+slugs:
+  - doc
+  - faq
+  - angepasste-sprachen-liste
+---
+
+# Ist es möglich, einen Sprachtyp wie Englisch zu blockieren? Ich füge Englisch in meine Wörterbücher ein, möchte Englisch aber noch nicht auf der Webseite verfügbar machen
+
+Ja, Sie können einen Sprachtyp wie Englisch blockieren, indem Sie die Option `availableLocales` in der Intlayer-Konfiguration verwenden.
+
+```ts
+import { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  locales: [Locales.FRENCH, Locales.SPANISH, Locales.ENGLISH],
+  availableLocales: [Locales.FRENCH, Locales.SPANISH],
+  defaultLocale: Locales.FRENCH,
+};
+```
+
+oder
+
+```ts
+import { IntlayerConfig } from "intlayer";
+
+const locales = [Locales.FRENCH, Locales.SPANISH, Locales.ENGLISH];
+
+const config: IntlayerConfig = {
+  locales,
+  availableLocales: locales.filter((locale) => locale !== Locales.ENGLISH),
+  defaultLocale: Locales.FRENCH,
+};
+```
+
+Diese Konfiguration ändert die Typen Ihrer `t()`-Funktion so, dass nur die verfügbaren Sprachen eingeschlossen werden.
+
+Die Option `availableLocales` ist optional; wenn Sie sie nicht angeben, sind alle Sprachen verfügbar.
+
+Seien Sie vorsichtig, alle in der Option `availableLocales` enthaltenen Sprachen sollten auch in der Option `locales` enthalten sein.
+
+Beachten Sie, dass wenn Sie den `useLocale` Hook verwenden, die Option `availableLocales` verwendet wird, um den Zugriff auf die Sprachliste festzulegen.
+
+```ts
+import { useLocale } from "intlayer";
+
+const { availableLocales } = useLocale();
+
+console.log(availableLocales); // [Locales.FRENCH, Locales.SPANISH]
+```

package/frequent_questions/de/domain_routing.md

@@ -0,0 +1,114 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Wie konfiguriere ich domänenbasiertes Routing?
+description: Erfahren Sie, wie Sie domänenbasiertes Routing konfigurieren.
+keywords:
+  - domäne
+  - routing
+  - intlayer
+  - konfiguration
+  - middleware
+  - react-router
+  - vue-router
+  - next.js
+  - vite
+  - framework
+slugs:
+  - doc
+  - faq
+  - domain-routing
+---
+
+# Wie konfiguriere ich **domänenbasiertes Routing** mit Intlayer anstelle von `/[locale]/`-Pfaden?
+
+## Kurze Antwort
+
+Domänenbasiertes Routing ist einfacher als pfadbasiertes Routing (`example.com/[locale]/`), da Sie alle Middleware- und Routing-Konfigurationen überspringen können. Stellen Sie Ihre App einfach für jede Sprachdomäne bereit und setzen Sie für jede Domäne eine Umgebungsvariable.
+
+## Schritt-für-Schritt
+
+1. **Einmal pro Domäne bereitstellen** (`example.com`, `exemple.fr`, `ejemplo.es`, …).
+2. Für jede Bereitstellung setzen Sie `LOCALE` (und die üblichen Intlayer-Umgebungsvariablen) auf die Sprache, die diese Domäne bedienen soll.
+3. Verweisen Sie in Ihrer `intlayer.config.[ts|js]` auf diese Variable als `defaultLocale`.
+
+```ts
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: process.env.LOCALE, // 👈 die Domäne bestimmt die Sprache
+  },
+  // ... Rest Ihrer Konfiguration
+};
+
+export default config;
+```
+
+Das war's – funktioniert genauso für **Next.js**, **Vite + React**, **Vite + Vue** usw.
+
+## Was ist, wenn jede Domäne auf die **gleiche** Bereitstellung zugreift?
+
+Wenn alle Domains auf dasselbe Anwendungs-Bundle zeigen, müssen Sie den Host zur Laufzeit erkennen und die Sprache manuell über den Provider übergeben.
+
+### Für Next.js
+
+```tsx
+// src/IntlayerProvider.tsx
+import {
+  IntlayerClientProvider,
+  type IntlayerClientProviderProps,
+} from "next-intlayer";
+import { IntlayerServerProvider } from "next-intlayer/server";
+import type { FC } from "react";
+
+export const IntlayerProvider: FC<IntlayerClientProviderProps> = ({
+  children,
+  locale,
+}) => {
+  const resolvedLocale = locale ?? getLocaleFromHostname(); // Ermittelt die Sprache anhand des Hostnamens, falls locale nicht gesetzt ist
+  return (
+    <IntlayerServerProvider locale={resolvedLocale}>
+      <IntlayerClientProvider locale={resolvedLocale}>
+        {children}
+      </IntlayerClientProvider>
+    </IntlayerServerProvider>
+  );
+};
+```
+
+### Für Vue
+
+```ts
+import { createApp } from "vue";
+import { installIntlayer } from "vue-intlayer";
+import App from "./App.vue";
+import { router } from "./routes";
+
+const app = createApp(App);
+app.use(router);
+installIntlayer(app, getLocaleFromHostname());
+app.mount("#app");
+```
+
+Ersetzen Sie `getLocaleFromHostname()` durch Ihre eigene Logik zur Ermittlung der Sprache.
+
+## Aktualisieren Sie Ihren Sprachumschalter
+
+Bei der Verwendung von domänenbasiertem Routing bedeutet das Wechseln der Sprache, zu einer anderen Domain zu navigieren:
+
+```ts
+const { locale } = useLocale();
+
+function changeLanguage(target: Locale) {
+  window.location.href = domainForLocale[target];
+}
+```
+
+## Vorteile des domänenbasierten Routings
+
+1. **Einfachere Konfiguration**: Keine Notwendigkeit, `intlayerMiddleware`, `generateStaticParams`, `react-router` oder `vue-router` zu konfigurieren
+2. **Bessere SEO**: Jede Sprache hat ihre eigene Domain
+3. **Sauberere URLs**: Kein Sprachpräfix im Pfad
+4. **Einfachere Wartung**: Jede Sprachbereitstellung ist unabhängig

package/frequent_questions/de/esbuild_error.md

@@ -0,0 +1,30 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: ESBuild-Fehler
+description: Erfahren Sie, wie Sie ESBuild-Fehler beheben können.
+keywords:
+  - esbuild
+  - fehler
+  - intlayer
+  - plugin
+  - framework
+  - next.js
+  - vite
+  - react-native
+  - lynx
+slugs:
+  - doc
+  - faq
+  - esbuild-fehler
+---
+
+# ESBuild-Fehler
+
+Wenn Sie während des Build-Prozesses auf einen ESBuild-Fehler stoßen, liegt dies wahrscheinlich daran, dass das Intlayer-Plugin nicht korrekt konfiguriert wurde.
+
+ESBuild ist dafür verantwortlich, die Inhaltsdeklarationsdateien (`.content.{ts,js,mjs,cjs,json}`) zu lesen und die entsprechenden Wörterbücher im Ordner `.intlayer/dictionary` zu generieren. Ebenso liest es die Konfigurationsdatei (`intlayer.config.ts`).
+
+Intlayer stellt Plugins zur Integration mit Ihren Bundlern bereit. Es ist darauf ausgelegt, Komponenten zu aliasieren, die ausschließlich auf der Serverseite ausgeführt werden sollen.
+
+Wenn Sie ein Framework wie Next.js (Webpack / Turbopack), Vite, React Native, Lynx usw. verwenden, stellt Intlayer ein Plugin bereit, das Sie zur Integration von Intlayer in Ihre Anwendung verwenden können. Konsultieren Sie daher die spezifische Dokumentation Ihres Frameworks, um zu erfahren, wie Sie das Plugin integrieren können.