تكامل 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. إعداد المصادقة

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


# .env.local

GROQ_API_KEY=gsk_...

الخطوة 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.

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