البدء السريع

أضف دعم اللغات المتعددة إلى تطبيق React الخاص بك في أقل من 5 دقائق.

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

  • Node.js 18+
  • تطبيق React يستخدم Next.js (App Router) أو Vite

التثبيت

pnpm install @lingo.dev/compiler

الإعداد

Next.js

اجعل الإعداد الخاص بك غير متزامن وقم بتغليفه بـ withLingo:

// next.config.ts
import type { NextConfig } from "next";
import { withLingo } from "@lingo.dev/compiler/next";

const nextConfig: NextConfig = {};

export default async function (): Promise<NextConfig> {
  return await withLingo(nextConfig, {
    sourceRoot: "./app",
    sourceLocale: "en",
    targetLocales: ["es", "de", "fr"],
    models: "lingo.dev",
    dev: {
      usePseudotranslator: true, // Fake translations for development
    },
  });
}

Vite

أضف إضافة Lingo إلى إعداد Vite الخاص بك:

// vite.config.ts
import { defineConfig } from "vite";
import { lingoCompilerPlugin } from "@lingo.dev/compiler/vite";

export default defineConfig({
  plugins: [
    lingoCompilerPlugin({
      sourceRoot: "src",
      sourceLocale: "en",
      targetLocales: ["es", "de", "fr"],
      models: "lingo.dev",
      dev: {
        usePseudotranslator: true,
      },
    }),
    // ...other plugins
  ],
});

إعداد المزود

Next.js

قم بتغليف تطبيقك بـ LingoProvider في التخطيط الجذري الخاص بك:

// app/layout.tsx
import { LingoProvider } from "@lingo.dev/compiler/react";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <LingoProvider>
      <html>
        <body>{children}</body>
      </html>
    </LingoProvider>
  );
}

Vite

قم بتغليف تطبيقك بـ LingoProvider في نقطة الدخول الخاصة بك:

// src/main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { LingoProvider } from "@lingo.dev/compiler/react";
import App from "./App";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <LingoProvider>
      <App />
    </LingoProvider>
  </StrictMode>
);

المصادقة

يستخدم المترجم محرك Lingo.dev بشكل افتراضي للترجمات.

الخيار 1: محرك Lingo.dev (موصى به)

سجل في lingo.dev وقم بالمصادقة:

npx lingo.dev@latest login

مستخدمو Windows: إذا لم يعمل npx lingo.dev في بيئتك:

  1. قم بتثبيت الحزمة: npm install lingo.dev@latest
  2. استخدم npx lingo بدلاً من ذلك (على سبيل المثال، npx lingo login)

يحفظ هذا مفتاح API الخاص بك محليًا. مستوى Hobby المجاني كافٍ لمعظم المشاريع.

تواجه مشاكل في المصادقة؟ إذا كان متصفحك يحظر تدفق المصادقة، أضف مفتاح API الخاص بك يدويًا إلى .env:

LINGODOTDEV_API_KEY=your_key_here

ابحث عن مفتاح API الخاص بك في إعدادات مشروع Lingo.dev.

الخيار 2: مزود LLM مباشر

بدلاً من ذلك، استخدم أي مزود LLM مدعوم مباشرة. قم بتحديث التكوين الخاص بك:

{
  models: {
    "*:*": "groq:llama-3.3-70b-versatile",
    // or "google:gemini-2.0-flash"
    // or "openai:gpt-4o"
    // or "anthropic:claude-3-5-sonnet"
  }
}

أضف مفتاح API المقابل إلى .env:

GROQ_API_KEY=your_key
# or GOOGLE_API_KEY, OPENAI_API_KEY, ANTHROPIC_API_KEY

راجع مزودو الترجمة لجميع المزودين المدعومين.

تشغيل خادم التطوير

ابدأ خادم التطوير الخاص بك:

npm run dev

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

  1. فحص JSX الخاص بك بحثًا عن النص القابل للترجمة
  2. إنشاء ترجمات زائفة (ترجمات وهمية لتصور ما يتم ترجمته)
  3. حقنها في المكونات الخاصة بك
  4. تخزين البيانات الوصفية في .lingo/metadata.json

لماذا الترجمات الزائفة؟ إنها فورية (بدون استدعاءات API)، وتُظهر بالضبط ما يتم ترجمته، وتساعد في اختبار واجهة المستخدم الخاصة بك بأطوال نصية متفاوتة—كل ذلك دون إنفاق أرصدة API.

اختبار الترجمة

أضف مكونًا بسيطًا:

export function Welcome() {
  return (
    <div>
      <h1>Welcome to our app</h1>
      <p>This text will be translated automatically</p>
    </div>
  );
}

لا حاجة لتغييرات في الكود—يتم استخراج النص وترجمته تلقائيًا.

إضافة مبدل اللغة (اختياري)

اسمح للمستخدمين بتغيير اللغات:

"use client"; // For Next.js

import { useLingoContext } from "@lingo.dev/compiler/react";

export function LanguageSwitcher() {
  const { locale, setLocale } = useLingoContext();

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      <option value="en">English</option>
      <option value="es">Español</option>
      <option value="de">Deutsch</option>
      <option value="fr">Français</option>
    </select>
  );
}

إنشاء ترجمات حقيقية

عندما تكون جاهزًا للترجمات الحقيقية، قم بتحديث التكوين الخاص بك:

{
  dev: {
    usePseudotranslator: false, // Disable fake translations
  }
}

أعد تشغيل خادم التطوير الخاص بك. سيقوم المترجم الآن بإنشاء ترجمات حقيقية بالذكاء الاصطناعي لأي نص جديد أو متغير.

هل تهتم بالتكلفة؟ الترجمات الزائفة مجانية وفورية. قم بتعطيلها فقط عندما تحتاج إلى مراجعة جودة الترجمة الفعلية.

الأسئلة الشائعة

هل أحتاج إلى تحديد كل نص قابل للترجمة؟ لا. يكتشف المترجم نص JSX تلقائيًا. للاشتراك بدلاً من ذلك، قم بتعيين useDirective: true وأضف 'use i18n' في أعلى الملفات التي تريد ترجمتها.

ماذا عن المحتوى الديناميكي أو الخصائص؟ يتعامل المترجم مع سمات النصوص مثل alt وaria-label وplaceholder تلقائيًا. للنص الديناميكي، استخدم صيغة القالب: <p>Hello {name}</p> يعمل كما هو متوقع.

هل يمكنني تخصيص ترجمات محددة؟ نعم. استخدم سمة data-lingo-override:

<h1 data-lingo-override={{ es: "Bienvenido", de: "Willkommen" }}>
  Welcome
</h1>

كيف أقوم بحفظ الترجمات؟ احفظ دليل .lingo/ في نظام التحكم بالإصدارات. يحتوي على البيانات الوصفية والترجمات المخزنة مؤقتًا—آمن للحفظ ويجب إصداره جنبًا إلى جنب مع الكود الخاص بك.

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