الواجهات والتصميم

react-i18next Translations

عرّب وترجم تطبيقات React مع react-i18next، أشهر إطار i18n بدعم namespaces والتحميل الكسول والجمع.

Claude Code Cursor Copilot Windsurf

نظرة عامة

react-i18next هو إطار التعدد اللغوي الأكثر اعتمادًا لتطبيقات React، مبني على أساس i18next. يمكن لعملاء الذكاء الاصطناعي إعداد تكوين i18n، وإنشاء ملفات ترجمة مع namespaces، وتنفيذ اكتشاف اللغة، وإضافة تحميل كسول لحزم الترجمة.

توفر المكتبة واجهات متعددة للوصول للترجمات: خطاف useTranslation، ومكون Trans للاستيفاء مع JSX، و HOC withTranslation لمكونات الفئات. يمكن لعميل الذكاء الاصطناعي تنفيذ تنظيم الترجمة المبني على namespaces، وإعداد إضافات backend لتحميل الترجمات من الخوادم، وتكوين اكتشاف اللغة من URLs أو الكوكيز أو إعدادات المتصفح.

يدعم react-i18next ميزات متقدمة مثل الترجمات المتداخلة والترجمات المبنية على السياق وقواعد الجمع للغات المختلفة. يمكن لعملاء الذكاء الاصطناعي استخراج مفاتيح الترجمة من قاعدة الكود، وتحديد الترجمات المفقودة، وإنشاء ملفات ترجمة للغات جديدة بناءً على الملفات الموجودة.

لمن هذه الأداة؟

فرق React بتنفذ دعم متعدد اللغات في تطبيقات SPA
مطورين بيعملوا تنظيم ترجمة مبني على namespaces
فرق بتنفذ ترجمات محملة كسولاً للتطبيقات الكبيرة
مهندسين بيحولوا من نصوص مكتوبة في الكود لكود جاهز لـ i18n

التثبيت

إعداد Claude Code

npm install react-i18next i18next i18next-browser-languagedetector

الإعدادات

// i18n.ts
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: { welcome: "Welcome" } },
      ar: { translation: { welcome: "مرحبا" } },
    },
    fallbackLng: "en",
    interpolation: { escapeValue: false },
  });

زيارة المصدر (المستندات الرسمية)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

الواجهات والتصميم

Figma MCP Server

تحويل تصاميم Figma إلى كود مباشرة مع الحفاظ على الأنماط والمكونات.

Claude Code Cursor Windsurf

الواجهات والتصميم

Storybook Component Docs

إنشاء توثيق تفاعلي لمكونات الواجهة مع أمثلة حية وحالات استخدام.

Claude Code Copilot Cursor

الواجهات والتصميم

Tailwind CSS IntelliSense

إكمال تلقائي ذكي لأصناف Tailwind مع معاينة الألوان والقيم أثناء الكتابة.

Claude Code Copilot Cursor