تلقي إشعارات حول الإصدارات القادمة من Intlayer
    إنشاء:2024-03-07آخر تحديث:2025-09-30

    كيفية جعل المكون متعدد اللغات (i18n) باستخدام Intlayer

    يوضح هذا الدليل الخطوات الأساسية لجعل مكون واجهة المستخدم متعدد اللغات في إعدادين شائعين:

    • React (Vite/SPA)
    • Next.js (App Router)

    ستقوم أولاً بإعلان المحتوى الخاص بك، ثم استرجاعه في مكونك.

    1) إعلان المحتوى الخاص بك (مشترك بين React و Next.js)

    قم بإنشاء ملف إعلان المحتوى بالقرب من مكونك. هذا يحافظ على الترجمات قريبة من مكان استخدامها ويمكّن من الأمان النوعي.

    component.content.ts
    import { t, type Dictionary } from "intlayer";const componentContent = {  key: "component-example",  content: {    title: t({      en: "Hello",      fr: "Bonjour",      es: "Hola",    }),    description: t({      en: "A multilingual React component",      fr: "Un composant React multilingue",      es: "Un componente React multilingüe",    }),  },} satisfies Dictionary;export default componentContent;

    يدعم JSON أيضًا إذا كنت تفضل ملفات التكوين.

    component.content.json
    {  "$schema": "https://intlayer.org/schema.json",  "key": "component-example",  "content": {    "title": {      "nodeType": "translation",      "translation": { "en": "Hello", "fr": "Bonjour", "es": "Hola" }    },    "description": {      "nodeType": "translation",      "translation": {        "en": "A multilingual React component",        "fr": "Un composant React multilingue",        "es": "Un componente React multilingüe"      }    }  }}

    2) استرجع محتواك

    الحالة أ — تطبيق React (Vite/SPA)

    الطريقة الافتراضية: استخدم useIntlayer للاسترجاع بواسطة المفتاح. هذا يحافظ على مكونات خفيفة ومكتوبة بأنواع.

    ComponentExample.tsx
    import { useIntlayer } from "react-intlayer";export function ComponentExample() {  const content = useIntlayer("component-example");  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>    </div>  );}

    التصيير على جانب الخادم أو خارج المزود: استخدم react-intlayer/server ومرر locale صريحًا عند الحاجة.

    ServerRenderedExample.tsx
    import { useIntlayer } from "react-intlayer/server";export function ServerRenderedExample({ locale }: { locale: string }) {  const content = useIntlayer("component-example", locale);  return (    <>      <h1>{content.title}</h1>      <p>{content.description}</p>    </>  );}

    بديل: يمكن لـ useDictionary قراءة كائن معلن بالكامل إذا كنت تفضل تجميع البنية في موقع الاستدعاء.

    ComponentWithDictionary.tsx
    import { useDictionary } from "react-intlayer";import componentContent from "./component.content";export function ComponentWithDictionary() {  const { title, description } = useDictionary(componentContent);  return (    <div>      <h1>{title}</h1>      <p>{description}</p>    </div>  );}

    الحالة ب — Next.js (موجه التطبيق)

    يفضل استخدام مكونات الخادم لأمان البيانات والأداء. استخدم useIntlayer من next-intlayer/server في ملفات الخادم، وuseIntlayer من next-intlayer في مكونات العميل.

    app/[locale]/example/ServerComponent.tsx
    import { useIntlayer } from "next-intlayer/server";export default function ServerComponent() {  const content = useIntlayer("component-example");  return (    <>      <h1>{content.title}</h1>      <p>{content.description}</p>    </>  );}
    app/[locale]/example/ClientComponent.tsx
    "use client";import { useIntlayer } from "next-intlayer";export function ClientComponent() {  const content = useIntlayer("component-example");  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>    </div>  );}

    نصيحة: للحصول على بيانات وصفية للصفحة وتحسين محركات البحث، يمكنك أيضًا جلب المحتوى باستخدام getIntlayer وإنشاء روابط متعددة اللغات عبر getMultilingualUrls.

    لماذا نهج مكونات Intlayer هو الأفضل

    • التجميع: تعيش إعلانات المحتوى بالقرب من المكونات، مما يقلل الانحراف ويحسن إعادة الاستخدام عبر أنظمة التصميم.
    • سلامة النوع: المفاتيح والهياكل ذات أنواع قوية؛ تظهر الترجمات المفقودة أثناء وقت البناء بدلاً من وقت التشغيل.
    • الخادم أولاً: يعمل بشكل أصلي في مكونات الخادم لأمان وأداء أفضل؛ تبقى الخطافات الخاصة بالعميل سهلة الاستخدام.
    • إزالة الشجرة (Tree-shaking): يتم تجميع المحتوى المستخدم فقط بواسطة المكون، مما يحافظ على صغر حجم الحمولة في التطبيقات الكبيرة.
    • تجربة المطور والأدوات: تتضمن طبقة وسيطة مدمجة، ومساعدات تحسين محركات البحث، وترجمات اختيارية عبر المحرر المرئي/الذكاء الاصطناعي لتبسيط العمل اليومي.

    راجع المقارنات والأنماط في الملخص الموجه لـ Next.js: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer

    الأدلة والمراجع ذات الصلة

    تتضمن هذه الصفحات إعدادًا شاملاً، ومزودين، والتوجيه، ومساعدات تحسين محركات البحث.

    تلقي إشعارات حول الإصدارات القادمة من Intlayer