استخدم مساعدك المفضل للملخص واستخدم هذه الصفحة والموفر AI الذي تريده
بدءاً من الدمج مع خادم MCP Intlayer ، يمكن لمساعدك الذكي الاسترجاع من جميع المستندات مباشرة من ChatGPT ، DeepSeek ، Cursor ، VSCode ، إلخ.
عرض الوثائق الخاصة بالخادم MCPتمت ترجمة محتوى هذه الصفحة باستخدام الذكاء الاصطناعي.
اعرض آخر نسخة المحتوى الأصلي باللغة الإنكليزيةإذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.
رابط GitHub للتوثيقنسخ الـ Markdown من المستند إلى الحافظة
كيفية جعل المكون متعدد اللغات (i18n) باستخدام Intlayer
يوضح هذا الدليل الخطوات الأساسية لجعل مكون واجهة المستخدم متعدد اللغات في إعدادين شائعين:
- React (Vite/SPA)
- Next.js (App Router)
ستقوم أولاً بإعلان المحتوى الخاص بك، ثم استرجاعه في مكونك.
1) إعلان المحتوى الخاص بك (مشترك بين React و Next.js)
قم بإنشاء ملف إعلان المحتوى بالقرب من مكونك. هذا يحافظ على الترجمات قريبة من مكان استخدامها ويمكّن من الأمان النوعي.
نسخ الكود إلى الحافظة
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 أيضًا إذا كنت تفضل ملفات التكوين.
نسخ الكود إلى الحافظة
{ "$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 للاسترجاع بواسطة المفتاح. هذا يحافظ على مكونات خفيفة ومكتوبة بأنواع.
نسخ الكود إلى الحافظة
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 صريحًا عند الحاجة.
نسخ الكود إلى الحافظة
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 قراءة كائن معلن بالكامل إذا كنت تفضل تجميع البنية في موقع الاستدعاء.
نسخ الكود إلى الحافظة
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 في مكونات العميل.
نسخ الكود إلى الحافظة
import { useIntlayer } from "next-intlayer/server";export default function ServerComponent() { const content = useIntlayer("component-example"); return ( <> <h1>{content.title}</h1> <p>{content.description}</p> </> );}
نسخ الكود إلى الحافظة
"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
الأدلة والمراجع ذات الصلة
- إعداد React (Vite): https://intlayer.org/doc/environment/vite-and-react
- React Router v7: https://intlayer.org/doc/environment/vite-and-react/react-router-v7
- بداية TanStack: https://intlayer.org/doc/environment/vite-and-react/tanstack-start
- إعداد Next.js: https://intlayer.org/doc/environment/nextjs
- لماذا Intlayer مقابل next-intl مقابل next-i18next: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
تتضمن هذه الصفحات إعدادًا شاملاً، ومزودين، والتوجيه، ومساعدات تحسين محركات البحث.