تكامل Next.js

يتكامل مُترجم Lingo.dev بسلاسة مع موجه تطبيقات Next.js لتوفير الترجمة وقت البناء دون الحاجة إلى تعديل مكونات React الخاصة بك.

اتبع هذه الخطوات لإضافة دعم متعدد اللغات إلى تطبيق Next.js الخاص بك.

استكشف Next.js لتجربة المُترجم قيد التشغيل.

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

  • Next.js 13+ مع موجه التطبيقات
  • React 18+
  • Node.js 18 أو أعلى

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

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

npm install lingo.dev

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

استيراد وتكوين المُترجم في ملف next.config.js الخاص بك:

import lingoCompiler from "lingo.dev/compiler";

/** @type {import('next').NextConfig} */
const nextConfig = {
  // إعدادات Next.js الحالية الخاصة بك
};

export default lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
})(nextConfig);

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

يرسل مُجمّع Lingo.dev المحتوى الخاص بك إلى محركات الترجمة بالذكاء الاصطناعي للتوطين، لذلك تحتاج إلى المصادقة أولاً.

الخيار 1. محرك Lingo.dev

يمكن لمُجمّع Lingo.dev استخدام محرك Lingo.dev كمحرك الترجمة بالذكاء الاصطناعي. يوفر اختيار النموذج الديناميكي، والتوجيه التلقائي، وذاكرة الترجمة، ودعم المصطلحات. تتوفر خيارات مجانية ومدفوعة.

للمصادقة، قم بتشغيل:

npx lingo.dev@latest login

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


# .env.local

LINGODOTDEV_API_KEY=...

ستجد الرمز المميز في إعدادات مشروع محرك Lingo.dev.

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

بدلاً من ذلك، يمكنك استخدام نماذج من مزودي نماذج اللغة الكبيرة (LLM) المدعومين:

أضف مفتاح/مفاتيح API الخاصة بك إلى ملف .env.local:


# .env.local

GROQ_API_KEY=gsk_...
GOOGLE_API_KEY=...
OPENROUTER_API_KEY=...
MISTRAL_API_KEY=...

ملاحظة: تأكد من تفعيل حسابك مع مزود نماذج اللغة الكبيرة وقبول شروط الخدمة الخاصة بهم قبل استخدامه في Compiler.

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

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

import { LingoProvider, loadDictionary } from "lingo.dev/react/rsc";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <LingoProvider loadDictionary={(locale) => loadDictionary(locale)}>
      <html>
        <body>{children}</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:3000 لمشاهدة تطبيقك متعدد اللغات قيد التشغيل.

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

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

export default lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de", "ja"],
  sourceRoot: "app", // الإعداد الافتراضي لـ Next.js
  lingoDir: "lingo", // دليل ملفات الترجمة
  rsc: true, // تمكين دعم مكونات خادم React
  debug: false, // تمكين تسجيل التصحيح
})(nextConfig);

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

يعمل مُترجم Lingo.dev البرمجي مع كل من مكونات الخادم والعميل:

مكونات الخادم

تتم معالجة مكونات الخادم في وقت البناء مع دعم كامل للترجمة:

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

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

تتلقى مكونات العميل حزم ترجمة محسّنة:

"use client";

import { useState } from "react";

export function InteractiveComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>لقد نقرت {count} مرات</p>
      <button onClick={() => setCount(count + 1)}>انقر هنا</button>
    </div>
  );
}

نشر الإنتاج

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

    npm run build

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

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

  3. النشر باستخدام المنصة المفضلة لديك (Vercel، Netlify، إلخ)

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

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