تكامل React Router / Remix

يعمل مُترجم Lingo.dev بسلاسة مع React Router وأحدث إصدار من Remix (وهو الآن React Router v7) لتوفير الترجمة وقت البناء.

اتبع هذه الخطوات لإضافة دعم متعدد اللغات إلى تطبيق React Router أو Remix الخاص بك.

أو استكشف مشروع العرض التوضيحي لـ React Router / Remix لتجربة المُترجم قيد التشغيل.

المتطلبات الأساسية

  • React Router v6+ أو Remix
  • Vite كأداة بناء
  • React 18+
  • Node.js 18 أو أعلى

الخطوة 1. تثبيت الحزمة

قم بتثبيت حزمة lingo.dev:

npm install lingo.dev

الخطوة 2. تكوين Vite

استيراد وتكوين المُجمِّع في ملف vite.config.ts الخاص بك:

import { defineConfig } from "vite";
import lingoCompiler from "lingo.dev/compiler";

const viteConfig = {
  // تكوين Vite الحالي الخاص بك
};

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "app",
    targetLocales: ["es", "fr", "de"],
    models: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

الخطوة 3. إعداد المصادقة

قم بإنشاء حساب مجاني على groq.com وأضف مفتاح API الخاص بك:


# .env

GROQ_API_KEY=gsk_...

الخطوة 4. إضافة المزود

لـ React Router

استيراد المزود في المكون الجذر الخاص بك (app/root.tsx):

import { LingoProvider } from "lingo.dev/react/client";
import { loadDictionary } from "lingo.dev/react/react-router";
import type { LoaderFunctionArgs } from "react-router";
import { useLoaderData } from "react-router";

// لـ React Router مع محمّلات البيانات
export async function loader(args: LoaderFunctionArgs) {
  return {
    lingoDictionary: await loadDictionary(args.request),
  };
}

export default function Root() {
  const { lingoDictionary } = useLoaderData<typeof loader>();

  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <body>
          <Outlet />
        </body>
      </html>
    </LingoProvider>
  );
}

لـ Remix

استيراد المزود في مسار الجذر الخاص بك (app/root.tsx):

import { LingoProvider } from "lingo.dev/react/client";
import { loadDictionary } from "lingo.dev/react/react-router";
import type { LoaderFunctionArgs } from "react-router";
import { useLoaderData } from "react-router";

export async function loader(args: LoaderFunctionArgs) {
  return json({
    lingoDictionary: await loadDictionary(args.request),
  });
}

export default function App() {
  const { lingoDictionary } = useLoaderData<typeof loader>();

  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <head>
          <Meta />
          <Links />
        </head>
        <body>
          <Outlet />
          <ScrollRestoration />
          <Scripts />
        </body>
      </html>
    </LingoProvider>
  );
}

الخطوة 5. اختياري: إضافة مبدل اللغات

قم بإنشاء مكون مبدل اللغات:

import { LocaleSwitcher } from "lingo.dev/react/client";

export function Header() {
  return (
    <header>
      <nav>
        <LocaleSwitcher locales={["en", "es", "fr", "de"]} />
      </nav>
    </header>
  );
}

الخطوة 6. البناء والاختبار

قم بتشغيل خادم التطوير الخاص بك:

npm run dev

سيقوم المترجم تلقائيًا بما يلي:

  1. فحص مكونات React الخاصة بك للمحتوى القابل للترجمة
  2. استخراج مفاتيح الترجمة
  3. إنشاء ترجمات مدعومة بالذكاء الاصطناعي
  4. إنشاء ملفات ترجمة محسنة في دليل lingo/

قم بزيارة http://localhost:5173 لمشاهدة تطبيقك متعدد اللغات قيد التشغيل.

خيارات التكوين

يمكنك تخصيص سلوك المترجم:

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    sourceLocale: "en",
    targetLocales: ["es", "fr", "de", "ja"],
    lingoDir: "lingo",
    debug: false,
  })(viteConfig),
);

العرض من جانب الخادم

يعمل المترجم مع كل من العرض من جانب العميل والعرض من جانب الخادم:

مكونات العميل

// src/components/Welcome.tsx
export function Welcome() {
  return (
    <div>
      <h1>مرحبًا بكم في تطبيقنا</h1>
      <p>يتم ترجمة هذا المحتوى تلقائيًا</p>
    </div>
  );
}

مكونات المسار

// app/routes/about.tsx
export default function About() {
  return (
    <div>
      <h1>معلومات عنا</h1>
      <p>تعرف على المزيد حول شركتنا</p>
    </div>
  );
}

نشر الإنتاج

  1. بناء التطبيق الخاص بك:

    npm run build

  2. التزام بملفات الترجمة:

    git add lingo/
git commit -m "Add translations"

  3. النشر باستخدام المنصة المفضلة لديك

سيقوم تطبيق React Router أو Remix الخاص بك بتقديم المحتوى المترجم تلقائيًا بناءً على تفضيلات المستخدم أو أنماط عنوان URL.

الخطوات التالية